Bootstrap .row列高度动态适配需求：取消强制等高，随内容调整

嘿，我完全懂你的困扰——搜遍相关话题全是教大家怎么实现列等高的，可你要的恰恰是让列高度随自身内容多少动态变化，不被旁边的列“拉平”。其实这个问题根源在于Bootstrap的默认布局逻辑，咱们一步步来解决：

1. 利用Bootstrap自带类快速解决（推荐） #

从Bootstrap 4开始，栅格的row默认是flex容器，默认的align-items: stretch属性会让所有子列自动拉伸到同一高度。要取消这个行为，只需要给row添加align-items-start类：

<!-- 修改前的行 -->
<div class="row">
  <div class="col-md-6">第一列较短的内容</div>
  <div class="col-md-6">第二列很长很长的内容...（省略N字）</div>
</div>

<!-- 修改后的行 -->
<div class="row align-items-start">
  <div class="col-md-6">第一列较短的内容</div>
  <div class="col-md-6">第二列很长很长的内容...（省略N字）</div>
</div>

align-items-start会让所有列在垂直方向上顶部对齐，各自保持自身内容的高度，不会被强制拉伸。

2. 排查自定义CSS导致的强制等高 #

如果你自己写了额外的CSS样式，检查有没有给列（.col-*类或者自定义列类）设置过：

• height: 100%
• min-height: 100%
• display: flex + 相关拉伸属性

如果有，直接覆盖这些样式即可：

/* 针对你的自定义列类调整 */
.custom-column {
  height: auto !important;
  min-height: auto !important;
  align-self: flex-start; /* 如果是flex子元素，强制顶部对齐 */
}

3. AngularJS动态内容的额外注意 #

如果你的内容是通过AngularJS动态渲染的（比如用ng-repeat或者异步加载数据），检查有没有自定义指令或者脚本在内容加载完成后自动设置了列等高逻辑。比如有些项目会写指令来统一列高度，找到并禁用这部分逻辑就行。

总的来说，最快捷的方法就是给row加上align-items-start类，直接利用Bootstrap的flexbox工具类就能搞定，不需要复杂的自定义代码。

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