Bootstrap 4.0.0：如何让Jumbotron铺满列高并对齐元素

这问题我太熟悉了！在Bootstrap 4里借助内置的flexbox工具类，就能完美实现你要的3列网格、Jumbotron等高、顶部内容对齐、按钮底部对齐的效果，完全不用额外写自定义CSS。我给你调整代码并解释每个关键点：

核心修改思路 #

• 让列容器变成垂直flex布局，确保内部Jumbotron能撑满高度
• 让Jumbotron本身成为flex容器，方便控制内部元素的对齐方式
• 利用mt-auto把按钮推到底部

修改后的完整代码 #

<div class="container">
  <div class="row">
    <!-- 第一个Jumbotron -->
    <div class="col-md-4 d-flex flex-column">
      <div class="jumbotron mt-3 flex-grow-1 d-flex flex-column" 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 mt-auto">Click me</button>
      </div>
    </div>
    <!-- 第二个Jumbotron（文本更多） -->
    <div class="col-md-4 d-flex flex-column">
      <div class="jumbotron mt-3 flex-grow-1 d-flex flex-column" style="padding: 0.6em 1.6em;">
        <h5>Longer Title</h5>
        <p style="font-size: 14px;">text text text text text text text text text text text text text text text text text text</p>
        <button type="button" class="btn btn-primary mt-auto">Click me</button>
      </div>
    </div>
    <!-- 第三个Jumbotron -->
    <div class="col-md-4 d-flex flex-column">
      <div class="jumbotron mt-3 flex-grow-1 d-flex flex-column" 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 mt-auto">Click me</button>
      </div>
    </div>
    <!-- 可以继续重复更多列 -->
  </div>
</div>

关键类的作用解释 #

1. col-md-4 d-flex flex-column：把列变成垂直方向的flex容器，这样内部的Jumbotron会自动填充列的高度，实现所有列等高。
2. flex-grow-1：让Jumbotron在列的容器里占据所有可用的垂直空间，确保每个Jumbotron高度一致。
3. d-flex flex-column（给Jumbotron）：让Jumbotron内部的元素（标题、文本、按钮）按垂直方向排列，方便后续的对齐控制。
4. mt-auto（给按钮）：这个类会自动给按钮添加顶部的margin，把它推到Jumbotron的底部，不管上面的文本内容有多少行，都能保持底部对齐。

另外，我去掉了Jumbotron里的container-fluid，因为它已经嵌套在container和col-md-4里面了，嵌套container类会带来额外的padding，反而破坏布局的一致性。

这样修改后，你的3×N网格就会完美呈现：所有Jumbotron高度统一，标题和文本顶部对齐，按钮稳稳地在底部对齐！

内容的提问来源于stack exchange，提问作者JoeSlav