Bootstrap 4中实现等高列及文本垂直居中的问题求助

我明白你现在的困扰——已经实现了文本垂直对齐，但列盒子的高度却没法统一。其实核心问题是列内的内容容器没有充分利用列的高度，咱们可以通过Bootstrap 4的flex工具类来快速解决：

关键思路 #

Bootstrap 4的.row默认是flex容器，.col-4作为flex项目，默认会被拉伸到和同列其他元素一样的高度（因为align-items: stretch是row的默认值）。但如果你的内容盒子没有占满列的高度，就会出现视觉上的高度不一致。所以我们需要让内容盒子：

1. 占满所在列的全部高度
2. 内部文本垂直居中

修改后的代码示例 #

<div class="container">
  <div class="row"> <!-- 移除row上的align-items-center，让列默认拉伸至统一高度 -->
    <div class="col-4">
      <!-- 给内容容器添加flex相关类，实现高度占满+文本垂直居中 -->
      <div class="box bg-light p-3 d-flex align-items-center h-100">
        这里是短文本内容
      </div>
    </div>
    <div class="col-4">
      <div class="box bg-light p-3 d-flex align-items-center h-100">
        这里是较长的文本内容，会自动换行，测试盒子高度是否能和其他列保持一致
      </div>
    </div>
    <div class="col-4">
      <div class="box bg-light p-3 d-flex align-items-center h-100">
        这里是非常长的文本内容，用来验证高度统一的效果，确保不管内容多少，盒子高度都一样，同时文本垂直居中
      </div>
    </div>
  </div>
</div>

代码解释 #

• .h-100：让内容盒子占满父元素（.col-4）的100%高度，确保和其他列的盒子高度统一
• .d-flex：将内容盒子转为flex容器，为垂直居中提供基础
• .align-items-center：在flex容器内让子元素（文本）垂直居中
• 移除.row上的.align-items-center：这个类会让列在row内垂直居中，但我们需要列被默认的align-items: stretch拉伸至相同高度，才能保证盒子高度统一

额外说明 #

如果你的内容盒子有自定义样式（比如边框、阴影），只需要把这些样式加在带有.d-flex align-items-center h-100的容器上即可，这样所有列的盒子都会自动保持高度一致，同时文本始终垂直居中。

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