Bootstrap 4行内两个等高Jumbotron且内容垂直居中问题

我来帮你搞定这个Bootstrap布局问题！要让两个Jumbotron在一行保持相同高度，同时内部内容垂直居中且占满行高，可以通过Bootstrap的内置flex工具类+少量自定义CSS实现，具体方案如下：

步骤1：修改HTML结构 #

给父级row添加align-items-stretch类让列自动拉伸等高，再给每个jumbotron添加h-100（占满列高度）和flex相关类实现内容垂直居中：

<div class="container">
  <div class="row align-items-stretch">
    <div class="col-8">
      <div class="jumbotron greenback d-flex flex-column justify-content-center h-100">
        <h7>Welcome to the Project test Detail page</h7>
      </div>
    </div>
    <div class="col-4">
      <div class="jumbotron greenback d-flex flex-column justify-content-center h-100">
        <div class="inner-score">
          <div class="score-title">
            <h6>Team Score</h6>
          </div>
          <div class="score-value">
            <h4>85</h4>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

步骤2：调整自定义CSS #

Bootstrap的jumbotron默认带有margin-bottom，会导致列之间出现空隙，需要去掉这个默认样式：

.greenback {
  background-color: #d4edda;
}

.jumbotron {
  margin-bottom: 0; /* 移除默认底部外边距，确保列高度完全对齐 */
}

关键类作用说明 #

• align-items-stretch：作用在row上，强制所有子列拉伸到同一高度，不管内部内容多少。
• h-100：让jumbotron占满所在列的100%高度，避免内容高度不足时Jumbotron缩起来。
• d-flex flex-column justify-content-center：把Jumbotron转为flex容器，垂直排列内部元素，并让内容在容器中垂直居中。

这样修改后，两个Jumbotron就会始终保持相同高度，内部内容也能完美垂直居中，同时填满整个行的高度啦！

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