真等高需让.card直接父容器（如.col）同时加d-flex和h-100以提供flex上下文与高度基准，.card加h-100，.card-body用d-flex flex-column h-100+flex-grow-1+mt-auto实现内部对齐，并统一图片容器高度。
卡片高度不统一不是样式写错了，是 Bootstrap 默认流式布局的自然结果——.card 由内容撑开，标题行数、图片比例、文字长度一变，高度就跟着变。真等高必须靠 flex 布局“拉伸”，关键在 .col 是否同时满足两个条件：是 flex 容器，且有可继承的高度。
为什么加了 h-100 还是不等高
因为 h-100 只表示“占满父容器 100% 高度”，但前提是父容器得有高度可继承。.col 默认高度由内容决定，没内容时就是 0；.row 不会给子列设最小高度。
-
.card的直接父级不是.col（比如中间多套了一层<div>），<code>h-100就断在半路 -
.col上写了height、min-height或overflow: hidden，截断高度继承链 -
.card-body里写了height: 200px或min-height: 100%，覆盖了外部h-100的拉伸效果 - 图片加载慢时，
.card初始高度为 0，h-100拉的也是 0 —— 建议加min-height: 250px兜底 -
.col-md-4类名必须同时搭配d-flex（激活 flex）和h-100（提供高度上下文） - 不要写
height: 100%或min-height: 300px—— 会破坏响应式，小屏溢出或留白 - 如果用了嵌套结构（比如
.col > div > .card），h-100就断在中间那层div，必须删掉或也加d-flex h-100 - Bootstrap 5.3+ 中
.card-group已彻底移除，继续用会触发Unknown pseudo-class selector ".card-group"报错 -
.card-body加d-flex flex-column h-100，变成纵向弹性容器 -
<p class="card-text"></p>加flex-grow-1（不是flex: 1，后者在某些版本有兼容问题） - 按钮加
mt-auto（比align-self-end更稳定，不受文字行数影响） - 绝对不要给
.card-body写height或min-height，会撑破或截断整体高度 - 给
.card-img-top显式设height: 180px（或min-height: 180px），避免依赖原始尺寸 - 必须加
object-fit: cover和object-position: center（否则拉伸变形或顶部留白） - 现代项目可用
aspect-ratio: 4/3替代固定height，但需确认目标浏览器支持（IE 不支持） - 别用
img { width: 100%; height: auto }—— 这会让高度浮动，彻底破坏等高前提
.col 必须同时加 d-flex 和 h-100
真正起作用的是让 .card 的**直接父容器**（通常是 .col-md-4 这类列）变成 flex 容器，并提供高度基准。加在 .row 或 .card-body 上都没用。
.card-body 内部内容对齐要用 d-flex flex-column h-100
外部高度统一后，标题、正文、按钮仍可能堆顶或悬浮——因为 .card-body 还是流式布局，没接管内部空间分配。
.card-img-top 图片区域必须强制等高且可控裁剪
即使卡片整体等高，.card-img-top 因原始比例不同被 object-fit: cover 裁剪后，人脸可能只剩半张——这不是高度问题，是视觉一致性问题。
最易忽略的是 .col 的 d-flex h-100 组合必须在每个响应式断点下都生效，比如 .col-sm-6 在小屏下也要加，不能只写在 .col-md-4 上；否则断点切换时高度继承链就断了。
