Bootstrap列未占满行全部高度问题求助

嘿，我刚好碰到过一模一样的问题！在Bootstrap 4里，列默认是靠自身内容撑开高度的，所以内容少的列自然会比内容多的矮。不过有几个简单好用的方法能搞定这个问题：

方法1：给行添加align-items-stretch类 #

Bootstrap 4的row本身就是flex容器，我们可以利用flex布局的特性，给row加上align-items-stretch类——这样所有子列都会被自动拉伸到和最高列一样的高度，一步到位让所有列等高。

示例代码：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<style>
.pink{ background: pink; }
.yellow{ background: yellow; }
.gray{ background: gray; }
.blue{ background: blue; }
.green{ background: green; }
.red{ background: red; }
</style>

<div class="container">
  <!-- 关键：给row加上align-items-stretch类 -->
  <div class="row align-items-stretch">
    <div class="col pink">短内容</div>
    <div class="col yellow">我是比较长的内容<br>第二行文本<br>第三行文本</div>
    <div class="col gray">普通长度的内容</div>
    <div class="col blue">另一个短内容</div>
  </div>
</div>

方法2：给特定列添加h-100类 #

如果你只希望部分列占满行高，而不是全部，那就给这些列加上h-100类（Bootstrap内置类，对应CSS的height: 100%）。这个类会让列继承父级row的高度，而row的高度由最高的列决定，所以目标列会自动填满整个行高。

示例代码：

<div class="container">
  <div class="row">
    <div class="col pink h-100">短内容（已占满行高）</div>
    <div class="col yellow">我是比较长的内容<br>第二行文本<br>第三行文本</div>
    <div class="col gray">普通长度的内容</div>
    <div class="col blue h-100">另一个短内容（已占满行高）</div>
  </div>
</div>

方法3：自定义CSS（灵活控制场景） #

如果内置类满足不了你的特殊需求，也可以自己写CSS来控制：

/* 让所有列强制占满行高 */
.row .col {
  height: 100%;
}

/* 或者用flex属性强制拉伸列 */
.row .col {
  flex: 1 1 auto;
}

不过还是优先推荐用Bootstrap自带的类，这样代码更统一，后续维护也更方便。

试试看上面的方法，应该就能轻松解决你的列高度问题啦！

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