因为Bootstrap的.row默认align-items为normal而非stretch，必须显式加align-items-stretch类；且需同时满足：①两栏为.row直接子元素，②. row无height/max-height/overflow:hidden限制，③无!important覆盖align-items。
为什么加了 .row 两栏还是不等高
因为 bootstrap 的 .row 在 v4/v5 中默认是 display: flex，但它的等高行为（align-items: stretch）只在三个条件同时满足时才生效：① 两个 div 必须是 .row 的**直接子元素**；② .row 没被设 height、max-height 或 overflow: hidden；③ 没有其他 css 用 !important 覆盖 align-items。
常见失效场景包括：
— 把左栏包在 <div class="col"><div class="row">...</div></div> 里，内层 .row 不再是外层的直接子项
— 自定义媒体查询中写了 @media (max-width: 992px) { .row { align-items: flex-start !important; } }
— 给某列加了 min-height: 300px，反而让 stretch 失去参考基准
align-items-stretch 类不是可选，是必须显式加的
Bootstrap 5 的 .row 默认 align-items 值其实是 normal，不是 stretch。很多人以为“默认就等高”，结果白调半天。必须手动加 align-items-stretch 类才能触发拉伸逻辑。
正确写法示例：
<div class="row align-items-stretch"> <br><div class="col-md-6">内容短</div> <br><div class="col-md-6">内容很长，会撑开整行高度</div> <br> </div>
注意事项：
— 别在 .col 上写 height: 100% 或 min-height，这会干扰 stretch 行为
— 如果用了 h-100，它必须加在 .col 内部的容器（如 .card）上，而不是 .col 自身
— .col 默认 box-sizing: border-box，但若你内部加了未重置的 padding 或 border，两栏渲染高度可能差几个像素
响应式断点下等高突然失效
小屏切单列后等高自然消失，这是预期行为。但如果在 md 或 lg 下等高也出问题，大概率是响应式覆盖导致的。
检查重点：
— 是否在自定义 CSS 中对 .row 写了类似 @media (max-width: 768px) { .row { align-items: flex-start; } } 的规则
— 是否混用了 flex-column 和 align-items-stretch：垂直方向 stretch 需要容器有明确高度，否则无效
— 若需跨断点强等高（比如始终占满视口），可临时加 style="min-height: 100vh;" 到 .row，但仅限顶层布局，嵌套层级里慎用——它会让子列强行撑高，可能挤压内容
IE11 或需要 JS 回退时怎么处理
IE11 不支持 align-items: stretch 在 flex 容器上的可靠表现，此时不能依赖 CSS 方案。
轻量级 JS 回退建议：
— 用 jQuery 获取同排所有 .col 的 outerHeight()，取最大值，再统一设给每个 .col
— 避免全局轮询，只在 DOM 加载完、且确认是多列布局时执行一次
— 更稳妥的做法是：先用 CSS 实现现代浏览器效果，再用 @supports not (align-items: stretch) 包裹 JS 初始化逻辑
真正容易被忽略的是：等高只是视觉对齐，不是内容对齐。如果一栏底部有按钮需要“钉”在底部，光靠 stretch 不够，得在列内部用 d-flex flex-column h-100 + mt-auto 配合 —— 这个细节，90% 的人调试到崩溃才发现漏了。
