Bootstrap 4 列高度不一致问题求助：新手学习遇等高失效

嘿，我懂你碰到的这个问题——Bootstrap 4的row本身是flex容器，里面的col默认是等高的，但你的projectDescBox并没有占满父列的高度，所以才会看起来两个盒子不一样高。咱们来快速解决这个问题：

方法1：用Bootstrap自带的工具类 #

最简单的方式就是给每个projectDescBox加上h-100类，这个类会设置height: 100%，让容器撑满它所在列的高度。修改后的代码如下：

<div class="row">
  <div class="col-8">
    <div class="projectDescBox h-100">
      <h5>Project</h5>
      <p>Stuff here</p>
    </div>
  </div>
  <div class="col-4">
    <div class="projectDescBox h-100">
      <h5>heading</h5>
      <p>a lot longer stuff here. This box should...</p>
    </div>
  </div>
</div>

顺便提一句：Bootstrap 4里col-xs-*已经被简化成col-*了，因为网格系统是移动优先的，col-*就对应xs（超小屏幕）的列宽，如果你不需要在不同断点改变列宽，完全不用重复写col-sm-8、col-md-8这些哦。

方法2：自定义CSS控制 #

如果需要更灵活的布局（比如让容器内的内容垂直分布），可以给projectDescBox加自定义样式：

.projectDescBox {
  height: 100%;
  display: flex;
  flex-direction: column;
}

这样不仅能让容器等高，还可以通过margin-top: auto之类的属性，让某个元素（比如按钮）固定在容器底部，非常实用。

为什么原来的代码不生效？ #

Bootstrap 4的row是flex容器，里面的col默认有flex-grow: 1和align-self: stretch，所以列本身确实是等高的。但你的projectDescBox是普通块级元素，它的高度默认由内部内容决定，没有继承父列的100%高度，所以才会出现视觉上的不等高问题。

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