Bootstrap 5.3+ 已移除 .card-group，需用 d-flex + h-100 实现等高卡片；.card-body 应设 d-flex flex-column h-100，正文加 flex-grow-1，按钮用 mt-auto；图片统一 height 或 aspect-ratio 防裁剪失衡。
Bootstrap 5 中 .card-group 已被移除，别再用它
Bootstrap 5.3+ 彻底删除了 .card-group 类，直接使用会触发 CSS 解析错误或静默失效。控制台可能报 Unknown pseudo-class selector ".card-group"，页面布局也可能错乱。这不是你写错了，是框架本身已废弃——v4 的 .card-group 内部虽用了 display: flex，但它强制子卡片平分宽度、禁用响应式栅格，且无法与 .col 混用，在 v5 中被明确弃用。
如果你在旧项目里看到它还能“勉强工作”，大概率是因为自定义 CSS 或第三方插件兜底，不是 Bootstrap 5 原生支持。
真正起作用的是 d-flex + h-100 组合
等高不是靠某个 magic class，而是让卡片“拉伸填满父容器高度”。关键条件有三个：
-
.card的**直接父元素**必须是 Flex 容器（加d-flex） - 该父容器自身要有可继承的高度上下文（加
h-100） -
.card自身也要加h-100，且不能被height、min-height或flex: none打断继承链
典型结构示例：
<div class="row">
<div class="col-md-4 d-flex h-100">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">标题</h5>
<p class="card-text">内容</p>
</div>
</div>
</div>
<!-- 其他 col -->
</div>
注意：.col-md-4 是 .card 的直接父级，所以 d-flex h-100 必须加在它上面，而不是 .row 上。
卡片内部内容对齐容易塌缩或上浮
即使外部高度统一了，.card-body 里的标题、正文、按钮仍可能堆在一起或悬浮顶部。这是因为默认流式布局下，它们不主动占位。
解决方法是把 .card-body 变成 flex 容器，并让正文“吃掉”中间空白：
- 给
.card-body加d-flex flex-column h-100 - 给正文
<p></p>加flex-grow-1（不是flex: 1，后者在某些版本会失效） - 按钮用
mt-auto推到底部，比align-self-end更稳定
这样无论文字多少，按钮始终沉底，标题和正文之间留白自动均分。
图片尺寸差异会让等高看起来“假”
.card-img-top 默认用 object-fit: cover，等高后不同原始比例的图会被裁剪，导致视觉失衡——一张卡显示人脸，另一张只露衣角。
更可控的做法是统一设约束：
- 给
.card-img-top加height: 180px或min-height: 180px - 避免只设
max-height，它不阻止图片撑高 - 如果要用响应式高度，改用
aspect-ratio: 4/3（现代浏览器），并配object-fit: cover
这个细节常被忽略：等高是技术目标，但用户感知的是视觉一致性。高度数字一样，不代表看起来整齐。
