Bootstrap实现两容器等高需设父容器为Flex且align-items: stretch；.row在v4需d-flex，v5需显式加align-items-stretch；须排除height/max-height/overflow隐藏、非直接子元素、子项设高度等干扰。
Bootstrap 实现两个等高容器并列排版，关键不在给容器设高度，而在确保父容器是 Flex 容器且启用 align-items: stretch——这是唯一原生、零 JS、跨版本（4/5）可靠的方案。
为什么加了 .col-6 两栏还是不等高
因为 .row 默认不是“真 Flex”行为：Bootstrap 4 必须加 d-flex；Bootstrap 5 虽默认 display: flex，但它的 align-items 实际值是 normal，不是 stretch。浏览器不会自动拉伸子项，除非你显式告诉它。
- 检查开发者工具里
.row的computed display是否为flex，computed align-items是否为stretch - 别依赖“默认就等高”的错觉——
align-items-stretch类必须手动加 - 如果用了自定义 CSS 或第三方库，可能悄悄覆盖了
align-items，尤其注意!important规则
.row 加 align-items-stretch 还是不生效？查这三个硬条件
Flex 拉伸不是无条件的，它需要干净的上下文：
-
.row不能有height、max-height或overflow: hidden—— 这些会截断拉伸基准 - 两个容器必须是
.row的**直接子元素**，不能套在额外的<div class="col"><div class="row">...</div></div>里 - 两个容器自身不能设
height、min-height、position: absolute—— 它们会让该列“报告”错误高度，导致 stretch 失效
想让内部卡片也等高？h-100 别加错位置
align-items-stretch 只让 .col-* 等高，不等于里面的内容也等高。卡片（.card）要填满整列，必须靠继承高度：
- ✅ 正确：
<div class="col-md-6"><div class="card h-100"></div></div>（h-100加在.card上） - ❌ 错误：
<div class="col-md-6 h-100"><div class="card"></div></div>（.col没内容时高度为 0，h-100无效） - 如果
.card内还有.card-body和.card-footer，想底部对齐按钮，得再加d-flex flex-column和margin-top: auto到按钮上
响应式切换后等高突然失效？优先盯媒体查询
大屏正常、中屏变矮，大概率是某处媒体查询偷偷改了 .row 的对齐方式：
- 搜
@media里是否写了.row { align-items: flex-start !important; }—— 这是最常见“静默关等高”操作 - 小屏切单列（
flex-column）后等高自然消失，这是预期行为；但如果md断点下也不等高，说明flex-direction: column被提前触发，却没配align-items: stretch - 嵌套
.row时，子.row不继承父级align-items，必须单独加align-items-stretch
真正容易被忽略的点是：等高不是“列自己长高”，而是 Flex 容器把所有子项“拉伸到同一高度”。只要父容器高度来源不可靠（比如被 overflow: hidden 截断、或子项含 position: absolute），整个链条就断了——这时候调样式不如先打开开发者工具，盯着 computed 面板看真实值。
