css - 扩大 jumbotron 的高度以覆盖整个列的高度

Question

使用 bootstrap 4.0.0，我有以下代码:

<div class="container">
<div class="row">

<div class="col-md-4">
  <div class="jumbotron mt-3 container-fluid" style="padding: 0.6em 1.6em;">
    <h5>Title</h5>
    <p style="font-size: 14px;">text text text</p>
    <button type="button" class="btn btn-primary"> Click me </button>
  </div>
</div>

... repeated many times

</div>
</div>

我正在尝试创建一个由 x 个超大屏幕组成的 3 网格。我无法扩展超大屏幕的高度以覆盖它们所在的给定行的 100%。每个人都有自己的高度。理想情况是 <h5>和 <p>是顶部对齐的，而 <button>底部对齐。

我怎样才能实现上述目标？谢谢

Answer 1

为 jumbrotrons 使用 flexbox utils。

<div class="col-md-4">
     <div class="jumbotron mt-3 h-100 d-flex flex-column align-items-start" style="padding: 0.6em 1.6em;">
          <h5>Title</h5>
          <p style="font-size: 14px;">text texttext</p>
          <button type="button" class="btn btn-primary mt-auto"> Click me </button>
     </div>
</div>

https://www.codeply.com/go/4uafEjOFdn

• h-100 - 使 col 的 jumbotron 填充高度
• d-flex flex-column - display:flex 垂直显示内容
• align-items-start - 将内容左对齐
• mt-auto - 在底部对齐底部

相关:Bootstrap 4 cards - align content at the bottom