.row 默认已是 flex，等高失效主因是 align-items: stretch 缺失可拉伸上下文；需确保 .col-* 为卡片直接父元素、加 d-flex、卡片加 h-100，且避免 height/max-height/absolute/图片未响应/min-height 干扰。
直接给 .row 加 d-flex 多数时候没用——Bootstrap 5 的 .row 默认已是 display: flex，真问题往往出在结构缺失、高度锚点没设或子项干扰拉伸行为上。
为什么 .row 已是 flex 却不等高
等高失效不是因为没开 flex，而是 flex 的 align-items: stretch 需要可拉伸的上下文。常见破坏点：
-
.row外层有height、max-height或overflow: hidden，直接截断拉伸 -
.col-*内部含position: absolute元素（如角标、悬浮按钮），它不参与高度计算 - 图片没加
img-fluid，撑开某列但其他列不响应，破坏整体高度一致性 - 手动给
.col-*设了min-height或height，覆盖了flex: 0 1 auto默认行为
真正起效的等高组合：h-100 + d-flex
这不是“多加个类”，而是一条完整的继承链。关键约束条件必须同时满足：
-
.col-*必须是卡片（如.card）的**直接父元素** - 该
.col-*上要加d-flex（不是只加在.row上） -
.card必须加h-100，否则高度无法向下传递 - 中间不能插
.card-body并设min-height，否则会打断高度继承
Flex 等高 vs Grid 等高：别混用
两者底层机制不同，强行叠加会覆盖失效：
-
.row上同时加d-flex和g-cols-3，Grid 类会被 Flex 覆盖，控制台可能报Unknown pseudo-class selector - Flex 更适合单行对齐（如导航栏按钮、一行四张卡片）、需配合
.col-md-4断点、或要兼容 IE11 - Grid 更适合瀑布流布局（如商品列表）、列数固定且卡片高度差异大、footer 对齐更稳
- 性能上无明显差距，但 Grid 是纯 CSS，初始化更快；Flex 动态插入内容后可能需要手动触发重排
五列等宽别硬套 col-5
col-5 在 Bootstrap 5 中根本不存在——栅格基于 12 等分，写上去浏览器直接忽略。错误做法：
- 用
width: 20%强行模拟，结果丢失 gutter、断点响应、flex 缩放能力 - 保留旧版
.card-deck，该类已在 v5 中废弃，残留代码会导致样式冲突或控制台报错
正确做法：改用 g-cols-5（需 Bootstrap 5.3+）或显式声明 col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 并配合 gap 控制间距。
