如何在引导程序 4 中减少模态标题默认高度

【问题标题】：how to decrease modal header default height in bootstrap 4如何在引导程序 4 中减少模态标题默认高度
【发布时间】：2018-09-19 21:16:09
【问题描述】：

我想减小 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>

我已将模态标题的高度设置为 5% 。但高度与默认值相同。如何降低引导模式标题高度？

【问题讨论】：

标签： css modal-dialog bootstrap-4 bootstrap-modal

【解决方案1】：

Bootstrap 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 分别是适用于减少顶部和底部填充的类）

【讨论】：

reduced 是小于 3 的整数，例如<div class="modal-header pt-2 pb-2">。见Bootstrap Spacing。