Bootstrap 5.3+ 已移除 .card-group，应改用 .row > .col 结构，并确保 .col 同时添加 d-flex 和 h-100；图片需统一 aspect-ratio 或 object-position；.card-body 需 d-flex flex-column h-100 + flex-grow-1 + mt-auto。
因为 .card-group 在 Bootstrap 5.3+ 中已被彻底移除，继续使用会直接失效或触发 CSS 解析错误，根本无法实现等高。
Bootstrap 5.3+ 已删除 .card-group 类
你看到的“高度不一致”，大概率不是布局问题，而是类名根本没生效：.card-group 自 Bootstrap 5.3 起已从源码中移除。浏览器控制台会出现类似 Unknown pseudo-class selector ".card-group" 的警告，CSS 规则压根没加载，自然谈不上等高逻辑。
- 官方文档和 Bootstrap 5.3.8 编译版中均无该类，所有依赖它的旧代码都会退化为普通
<div> <li>别试图在自定义 CSS 里重写 <code>.card-group—— 它原本的等高机制（基于display: table）在现代 Flex 布局下既冗余又难维护 - 如果你项目里还留着
<div class="card-group">，请立刻替换成 <code><div class="row"> 或语义更清晰的容器 <h3> <code>.col上漏掉d-flex和h-100是真凶即使你已改用
.row > .col > .card结构，卡片仍不等高，核心原因是：.col没同时加d-flex和h-100。这两个类必须共存，缺一不可：-
d-flex：让.col成为 Flex 容器，激活align-items: stretch（这才是拉伸子项的底层机制） -
h-100：给.col提供可继承的高度基准；没有它，.card.h-100拉的还是 0 - 常见错误：只加
h-100不加d-flex→.card高度仍由内容撑开；或反过来，只加d-flex不加h-100→.card拉不满
图片原始尺寸差异造成“视觉不等高”
所有卡片实际高度一致，但用户觉得“不齐”，往往是因为
.card-img-top的原始比例不同，object-fit: cover裁剪区域不一致：- 一张图是 4:3，另一张是 16:9，即使都设了
height: 180px，裁剪后露出的人脸/主体位置完全不同 - 解决方法不是调高度，而是统一构图：加
object-position: center确保居中裁剪，再配合min-height: 180px或aspect-ratio: 4/3（现代浏览器）固定容器比例 - 绝对避免
img { width: 100%; height: auto }—— 这会让图片高度浮动，直接破坏等高前提
.card-body内部没接管空间分配外部高度拉满后，按钮堆顶、文字悬浮、底部留白不均——这说明
.card-body还在用流式布局，没参与空间管理：- 必须给
.card-body加d-flex flex-column h-100，让它成为纵向弹性容器 -
<p class="card-text"></p>加flex-grow-1（不是flex: 1），吃掉中间空白 - 按钮加
mt-auto推到底部；别用margin-top: auto或align-self-end，后者在某些版本有兼容问题 - 严禁给
.card-body设height或min-height，会截断外部h-100的继承链
真正卡住的点永远在
.col—— 它是唯一能同时提供 Flex 上下文和高度基准的位置。任何在.row或中间 wrapper 上加h-100的尝试，都会在响应式断点切换时突然失效。 -
