Bootstrap栅格本身不提供等高列，必须靠Flex布局激活：BS4需加d-flex类，BS5默认flex但易被覆盖；嵌套.row会断链，.col-*须配合h-100继承高度，且需避免height/min-height、浮动及margin干扰拉伸。
Bootstrap 栅格本身不提供等高列，必须靠 Flex 布局显式激活或默认启用 —— 否则所有 .col-* 都按内容自适应高度，互不影响。
为什么加了 .row 还是不等高
因为 .row 在 Bootstrap 4 中默认是 display: block，子列（.col-*）只是浮动或 inline-block 元素，彼此高度完全独立；Bootstrap 5 虽默认 display: flex，但一旦被自定义 CSS、旧版样式表或内联 style="display: block" 覆盖，就退化回老行为。
- 检查浏览器开发者工具中
.row的最终display值，不是看类名，是看 computed 样式 - Bootstrap 3 完全不支持，必须手动加
.d-flex类并确保.col-*不再受float干扰 - 嵌套
.row是常见陷阱：只有.row的直接子元素才参与align-items: stretch，内部再套一层.row就断链了
d-flex 和 h-100 怎么配合用才有效
单加 d-flex 只让父容器变 Flex，但子列若没继承高度上下文，依然可能“看起来不等高”——尤其当列内有 .card 这类组件时。
- 给
.row加d-flex（BS4 必须，BS5 可省但建议保留以防覆盖） - 给每个
.col-*加h-100，让它撑满父行高度 - 再给
.card加h-100，否则卡片只按内容高，不拉伸 - 避免在
.card-body或.card-img上设height/min-height，会截断拉伸链
响应式断点下等高失效怎么办
等高是 Flex 的交叉轴行为，默认依赖容器有可计算的高度。小屏切单列后，.row 高度由最长列决定，其他列自然“被拉高”，但视觉上因堆叠而不可见；真正出问题的是在 md 或 lg 下本该两列并排却高度错位。
- 检查媒体查询是否意外重写了
.row的align-items，比如@media (max-width: 992px) { .row { align-items: flex-start !important; } } - 不要在响应式类里混用
flex-column和align-items: stretch：垂直方向 stretch 需要父容器有明确高度（如min-height: 500px），否则无效 - 图片未设
max-width: 100%或height: auto会导致某列被撑高却不触发拉伸，其他列仍“矮”
Bootstrap 3 用户怎么补救
BS3 的 .row 是 float 布局，强行加 display: flex 会让 .col-* 塌陷——必须同步处理浮动和宽度逻辑。
- 定义两个辅助类：
.d-flex { display: flex !important; }和.d-flex-item { flex: 1 0 auto; } - 给
.row加.d-flex，给每个.col-md-*加.d-flex-item - 移除或覆盖掉
.col-*上的float和width（Flex 会忽略它们） - IE10/11 对
flex: 1支持弱，改用flex: 1 1 auto并实测
最容易被忽略的是嵌套层级和 margin/padding 的干扰：哪怕只在某个 .card 里多了一行 margin-bottom: 2rem，都可能让整列“虚高”，而 Flex 拉伸只认内容盒高度，不包含外边距。
