不一定；bootstrap 5 的 .row 默认已是 display: flex，但等高常失效，主因是父容器高度缺失、子项含 position: absolute 或图片未设 img-fluid，以及手动设置 height/min-height 干扰 stretch 行为。

给 .row 加 d-flex 就能等高？不一定

Bootstrap 5 的 .row 默认已是 display: flex，但等高效果常失效，根本原因不是没加类，而是父容器高度上下文缺失或子项干扰拉伸行为。

• 如果 .row 外层有 height: 200px 或 overflow: hidden，会截断内容，align-items: stretch 失效
• .col-* 内部若存在 position: absolute 元素（如悬浮按钮、角标），它不参与高度计算，导致该列“视觉矮一截”
• 图片未设 img-fluid 或 max-width: 100%，撑开某列但其他列不响应，破坏等高逻辑
• 手动写了 min-height 或 height 在 .col-* 上，会覆盖 flex: 0 1 auto 的默认行为，阻止拉伸

为什么 h-100 + d-flex 是最稳组合

单纯靠 .row 的 flex 默认行为，在卡片、文本块等场景下往往不够——因为 .col-* 本身没有固有高度，stretch 需要一个可拉伸的“锚点”。h-100 提供的就是这个锚点：让子元素（如 .card）强制填满其直接父容器高度。

Bootstrap

Bootstrap 5.3.8 编译版包含可直接用于项目的 CSS、JavaScript 和插件文件，适合快速搭建响应式网页。

下载

• .col-* 必须是 .card 的**直接父元素**，且该 .col-* 要加 d-flex（不是只加在 .row 上）
• .card 加 h-100 后，高度继承链才完整；若中间插了 .card-body 且它设了 min-height，会打断继承
• 移动端换行后仍有效：只要每组等高单元都在独立 .row 内（比如每个 .row 放 3 张卡），就不会跨行错乱
• 慎用 .card-group：Bootstrap 5 已移除该类，残留代码会导致样式冲突或控制台报错 Unknown pseudo-class selector ".card-group"

Flex 等高 vs Grid 等高：选哪个

Bootstrap 5.3+ 原生支持 grid 类，语法更简洁（g-cols-3、gap-3），子项默认等高，无需 h-100。但它不是 Flex 的升级替代，而是适用场景不同。

• Flex 更适合**单行内对齐**（如一行 4 张卡片）、需配合 .col-* 响应式断点（col-md-4）、或要兼容 IE11（Grid 不支持）
• Grid 更适合**多行瀑布式均分**（如产品列表）、需精确控制列数与间距（g-cols-md-5）、且卡片高度差异大时 footer 对齐更稳
• 混用会出问题：在 .row 上同时加 d-flex 和 grid，后者会被前者覆盖；必须二选一，并清理掉旧类
• 性能无明显差异，但 Grid 初始化更快（纯 CSS），Flex 在动态插入内容后需手动调用 reLayout()（如配合 Masonry）

五列等宽布局别硬套 col-5

Bootstrap 5 栅格基于 12 等分，col-5 不存在，写上去浏览器直接忽略。强行用 width: 20% 又会丢 gutter、断点和 flex 缩放能力。

• 首选 row-cols-5：作用于 .row，自动让所有 .col 均分宽度，响应式友好（row-cols-md-5 row-cols-sm-2）
• 自定义类务必用 flex: 0 0 20%，不是 width: 20%；否则在 flex 容器中可能被压缩
• 必须显式处理 gutter：Bootstrap 的 gutter 通过 padding-left/right 实现，自定义类要继承 px-2 或重置 margin
• 小屏降级不可省：row-cols-5 在 xs 下依然会尝试五列，文字挤成一条线，务必搭配 row-cols-1 或 row-cols-sm-2

等高这事真正难的不是加哪几个类，而是判断哪一层该加、哪一层不该加，以及当响应式断点切换时，有没有某个媒体查询悄悄把 align-items 改成了 flex-start。