css - 如何在 bootstrap 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 分别是适合减少顶部和底部填充的类)