因为.row默认虽为flex且align-items:stretch，但等高需满足三前提：①两栏必须是.row直接子元素；②.row未设height/max-height/overflow:hidden；③无!important覆盖align-items。
为什么 .row 里两栏高度不一致
因为 Bootstrap 的 .row 默认是 display: flex（v4/v5），但“等高”只在满足三个前提时才生效：① 两栏必须是 .row 的**直接子元素**；② .row 没被设 height、max-height 或 overflow: hidden；③ 没在任何地方用 !important 覆盖 align-items: stretch。
常见错误包括：
- 把左栏包进
<div class="col"><div class="row">...</div></div>—— 内层.row不是外层.row的直接子项，stretch失效 - 给某列加了
min-height: 300px，另一列内容少，结果反而“撑高”了整行，视觉上更不一致 - 响应式断点里写了
@media (max-width: 992px) { .row { align-items: flex-start; } }，悄悄关掉了等高
Bootstrap 5 中最简可靠的等高写法
不用额外类、不写 JS，只要结构干净就能稳住：
- 确保两栏都是
.row的直接子元素：<div class="row"> <div class="col-4">...</div> <div class="col-8">...</div> </div> - 避免在列上设
float、display: inline-block或冲突的width - 如果右栏有背景图且要“贴满高度”，别只靠
background-size: cover—— 加h-100到该列，并确认其父.row没被截断（比如被overflow: hidden包裹） - 需要跨断点强等高（如 md/lg 下都拉满视口）？可临时加
style="min-height: 100vh;"到.row，但仅限顶层布局，嵌套层级里慎用
Bootstrap 3 怎么补救等高（无 Flex 原生支持）
Bootstrap 3 的 .row 是 display: block + float，原生不支持等高。必须手动注入 Flex 行为，且不能只改 .row：
- 给
.row加自定义类（如.d-flex-row），CSS 设display: flex !important - 给每个
.col-md-*加.flex-item，CSS 设flex: 1 0 auto（注意不是flex: 1，IE10/11 对后者支持差） - 务必移除
.col-*上的float: left和旧式width声明，Flex 会忽略它们，但可能引发塌陷 - 如果列内还有卡片或面板需等高，那该列本身也得是 Flex 容器（再套一层
d-flex flex-column）
响应式切换后等高失效，怎么排查
大屏正常、中屏错位，八成是媒体查询在捣鬼。重点检查：
- 是否在
@media (max-width: 768px)里重写了.row { align-items: flex-start; }或加了flex-direction: column却没配align-items: stretch - 是否用了
col-sm-12 col-md-6这类组合，导致小屏单列、中屏双列——单列时等高本就不生效，属预期行为；但若中屏仍不等高，说明col-md-6所在的.row被包裹在非 flex 容器里 - 是否在某列里用了
position: absolute或transform，脱离文档流后不再参与stretch计算
真正卡住人的，从来不是“怎么写”，而是嵌套层级和响应式覆盖——调试时先看 computed styles 里的 align-items 和 display，比猜快得多。
