代码之家 › 专栏 › 技术社区 › Stiven Choking

如何在bootstrap 4中降低模式标头的默认高度

bootstrap-modal bootstrap-4 modal-dialog css

Stiven Choking · 技术社区 · 6 年前

我想减少bootstrap 4模式的默认高度和宽度。为此,我编写了以下代码:

<div class="modal-header" style="background-color: darkblue;color:#fff;height:5%;!important">
  <p class="mx-auto d-block">Please Give Your Finger</p>  
</div>

我已将modal header的高度设置为5%。但高度与默认值相同。如何降低引导模式收割台高度?

1 回复 | 直到 6 年前

Rudi Visser 6 年前

引导4的默认值 modal-header 没有高度,它被填充为适合内容(您可以从浏览器中的开发人员工具中看到):

.modal-header {
    // ..
    padding: 1rem;
}

只需根据需要调整元素上的填充,而不是尝试设置 height 。

另外,我建议在标题文本中使用标题(因为这就是标题),而不是段落。

<div class="modal-header pt-reduced pb-reduced">
     <h5 class="modal-title">Please give your finger</h5>
</div>

(其中 .pt-reduced 和 .pb-reduced 类是否适合分别减少顶部和底部的填充)

推荐文章

AllenBooTung · 如何拖动多模态?

6 年前

Jari Rengeling · 引导模式在PHP中不显示

6 年前

Stiven Choking · 如何在bootstrap 4中降低模式标头的默认高度

6 年前

Veshraj Joshi · 在vuejs中显示另一个模态后,模态将自动隐藏。

6 年前

Droid4o12 · Modals in loop始终仅显示第一幅图像

6 年前

Nikul Panchal · google地图未使用引导模式加载

6 年前

Aakash Kumar · 表达式已更改打开组件内的模式弹出窗口时出错

6 年前

sharath thota · 如何更改glyphicon注释的高度和宽度(引导)

6 年前

Mark Edmondson · 将引导模式按钮映射到Flask WTF submit

6 年前

Rowan Richards DevExpress Team · 如何在ASP中创建模态表单。网络?

6 年前