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

Question

我想减少bootstrap 4模态默认的height和width。为此，我编写了以下代码：

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