Question

我想减少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％。但高度与默认值相同。如何减少bootstrap模态标题高度？

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

如何在bootstrap 4中减少模态头默认高度

1 个答案: