Bootstrap 4列高度不一致问题咨询

嘿，我太懂你这个困扰了——我当初也以为Bootstrap 4默认会让列自动等高，结果实际用的时候才发现得小小调整一下！其实Bootstrap 4的.row本身是flex容器，所以.col-md-4这些列本身已经是等高的了，只是你列里面的.table-heading和.table-text容器没有撑满列的高度，所以视觉上看起来不等高。

给你两个简单的解决办法：

方法一：让列内内容容器自动撑满高度 #

利用Bootstrap自带的flex工具类，给列内的外层容器加上垂直flex布局，再让文本区域占满剩余空间：

<div class="row">
  <div class="col-md-4">
    <!-- 加这层容器，用flex垂直布局并占满列的高度 -->
    <div class="d-flex flex-column h-100">
      <div class="table-heading">
        Lorem ipsum dolor sit amet
      </div>
      <!-- flex-grow-1 让这个区域自动填充剩余高度 -->
      <div class="table-text flex-grow-1">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="d-flex flex-column h-100">
      <div class="table-heading">
        Lorem...
      </div>
      <div class="table-text flex-grow-1">
        <!-- 哪怕这里文本很短，也会撑满剩余高度 -->
      </div>
    </div>
  </div>
</div>

这样不管每个列里的内容多少，内部的容器都会和最高的列保持一样的高度，完美实现视觉上的等高效果。

方法二：直接给列添加样式（更简单） #

如果你的需求只是让列的背景、边框看起来等高，那更省事——直接给.col-md-4加样式就行，因为列本身已经是等高的了：

.col-md-4 {
  background-color: #f8f9fa; /* 你可以换成想要的背景色 */
  border: 1px solid #dee2e6;
  padding: 1rem;
}

这样列本身的高度一致，加上样式后直接就呈现出等高的卡片效果，连内部元素都不用调整。

总结一下：Bootstrap 4的列本身已经默认等高，只是内部元素需要额外处理才能跟着撑满高度，用上面两个方法随便哪个都能搞定！

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