扩大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 jumbotrons 创建 3 个网格。我无法扩展 jumbotrons 的高度以覆盖它们所在行的 100%。每个人都有自己的身高。理想情况是<h5> 和<p> 是顶部对齐的，而<button> 是底部对齐的。

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

Answer 1

为 jumbrotrons 使用 flexbox 工具。

<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 - 让 jumbotron 填充 col 的高度
• d-flex flex-column - display:flex jumbotron 垂直显示内容
• align-items-start - 内容左下对齐
• mt-auto - 底部对齐

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