根本原因是高度继承链断裂，因.row和.col默认高度为auto，无法被h-100继承；需用d-flex+h-100组合或CSS Grid实现等高，禁用已移除的card-group/card-deck。
为什么直接加 h-100 卡片还不等高
根本原因是高度继承链断了。h-100 的意思是“继承父元素高度”，但默认情况下，.row 和 .col 的高度都是 auto，没有可继承的数值。常见断点包括：
-
.row没有被上层容器约束（比如没设min-height或没嵌在 flex/grid 容器里） -
.col外包了额外的<div>，而该<div>没加h-100，成了继承终点 - 卡片里用了
position: absolute或float，破坏文档流高度计算 -
.card-img-top未设height或min-height，加载慢时初始高度为 0，拉伸失效
用 d-flex + h-100 组合强制等高（Bootstrap 5 推荐）
这是目前最可控、兼容性最好的方式，关键在于让 .card 的**直接父元素**成为 flex 容器，并提供高度上下文：
-
.col必须同时加d-flex和h-100：激活 flex 行为，且提供高度基准 -
.card加h-100，确保填满.col高度；禁止写height或min-height - 若含
.card-body，建议也加h-100，否则内边距会让内容区不占满 - 结构示例：
<div class="row g-4"> <div class="col h-100 d-flex"> <div class="card h-100"> <div class="card-body h-100"></div> </div> </div> <div class="col h-100 d-flex"> <div class="card h-100"> <div class="card-body h-100"></div> </div> </div> </div>
用 CSS Grid 替代（现代浏览器优先）
如果你不需要支持 IE，Grid 是更简洁的选择，天然等高，无需层层 h-100：
- 父容器设
display: grid和grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) - 每张
.card直接作为 grid item，不加h-100，也不套.card-group（已移除） - 避免给
.card设height、min-height或flex相关属性，干扰 grid 自动拉伸 - 内部对齐仍需单独处理：在
.card-body上用d-flex flex-column h-100+flex-grow-1+mt-auto
别再用 card-group 或 card-deck
Bootstrap 5.3+ 已彻底移除 card-group，继续使用会触发 Unknown pseudo-class selector ".card-group" 报错；card-deck 是 v4 的 table-cell 实现，不支持响应式断行，也无法与 flex/grid 混合布局。
立即学习“前端免费学习笔记（深入）”；
真正容易被忽略的是图片适配——等高后，.card-img-top 若没统一 height 或 object-fit，一张露脸、一张截脚，视觉上就“不等高”了。
