bootstrap 5 的 .row 默认等高，但需满足三条件：1. .row 必须为 flex 容器；2. 两栏必须是 .row 的直接子元素；3. 子列不能有 height/min-height、position: absolute 等干扰 stretch 的样式。
Bootstrap 5 的 .row 默认就是 display: flex，只要没被覆盖，两栏天然等高——不用额外类、不写 JS，但必须满足三个硬条件，否则一定失效。
确认 .row 确实是 flex 容器
这是所有等高的前提。很多项目升级到 Bootstrap 5 后仍不等高，根本原因是自定义 CSS 或第三方库把 .row 的 display 改成了 block 或 inline-block。
- 打开浏览器开发者工具，选中
.row元素，看Computed面板里的display值是否为flex - 如果显示
block，检查是否有style="display: block"、.row { display: block !important }或no-gutters类（旧版兼容写法可能干扰） - 临时加
class="d-flex"强制修复，但长期应定位并删掉冲突样式
确保两栏是 .row 的直接子元素
align-items: stretch 只作用于 .row 的**直接子项**，嵌套一层 .row 或 div 就会断链。
- ❌ 错误写法：
<div class="col"><div class="row"><div class="col-12">内容</div></div></div>—— 内层.row不是外层.row的子项 - ✅ 正确写法：两栏都直接放在同一级
.row下，如<div class="col-md-6">左</div> <div class="col-md-6">右</div> - 响应式切换时也要检查媒体查询，比如
@media (max-width: 768px) { .row { align-items: flex-start; } }会悄悄关掉等高
避免 height / min-height / position: absolute 干扰拉伸
align-items: stretch 要求子列能“如实报告”自身高度。以下情况会让某列“报零”，导致它无法被拉高：
- 列内有
position: absolute的元素（脱离文档流，父列高度计算为 0） - 列上写了
height: 200px或min-height: 300px—— 这会锁死高度，破坏 stretch 行为 - 列里用了
margin-bottom: auto或mt-auto（在非 flex 容器中会干扰高度推算） - 图片没设
max-width: 100%或height: auto，撑开某列但不触发对齐
卡片或内容需填满整列？h-100 加在容器上，不是列上
align-items: stretch 只让 .col 等高，不会让里面的 .card 或 <p></p> 也撑满。想让卡片填满整列，必须手动传递高度。
- ✅ 正确：
<div class="col-md-6"><div class="card h-100">...</div></div>——.card直接继承父列高度 - ❌ 错误：
<div class="col-md-6 h-100"><div class="card">...</div></div>—— 若列内无内容，h-100无效（没有参考高度） - 含
.card-header和.card-footer时，给.card加d-flex flex-column，再给.card-body加flex-fill，否则.card-body会溢出或塌陷
真正容易被忽略的点是：等高行为完全依赖浏览器对 Flex 容器的高度推算逻辑，任何脱离文档流、固定尺寸或显式截断（如 overflow: hidden 在父级）都会让它失效——别猜，直接看 computed 样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
