如何在引导程序 4 中降低模式标头默认高度

Question

我想减少引导 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%。但是高度与默认值相同。如何降低引导模式标头高度？

Answer 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分别是适合减少顶部和底部填充的类(