真等高卡片需让.col同时加d-flex和h-100以提供flex上下文与高度基准，.card加h-100并禁用height/min-height，.card-body用d-flex flex-column h-100+flex-grow-1+mt-auto实现内部对齐，禁用已废弃的.card-group。
卡片高度在不同分辨率下自动一致，不是靠写死 height 或依赖 .card-group，而是让每张卡“拉伸填满它所在列的高度”，前提是列容器本身得是 flex 容器且有可继承的高度基准。
为什么加了 h-100 还不等高
因为 h-100 只表示“占父容器 100% 高”，但默认的 .col 没有显式高度，它只是块级盒子，高度由内容撑开——h-100 拉的其实是 0。真正起作用的是让 .col 同时具备两个条件：
-
.col加d-flex（激活 flex，才能对子项做交叉轴控制） -
.col加h-100（提供高度上下文，否则.card的h-100无处可拉） -
.card必须加h-100，且不能有height、min-height、flex: none等类打断继承链
.card-body 内容对齐总往上堆怎么办
外部等高后，标题、正文、按钮仍可能挤在顶部或悬浮，是因为 .card-body 默认还是流式布局，没接管内部空间分配。要让它“撑满+均分”：
-
.card-body加d-flex flex-column h-100（变成纵向弹性容器） - 正文
<p class="card-text"></p>加flex-grow-1（吃掉中间空白） - 按钮加
mt-auto（推到底部，比align-self-end更稳定） - 避免在
.card-body里写height或min-height，否则会截断或撑破整体高度
图片尺寸差异导致视觉“假等高”怎么处理
即使卡片高度一致，.card-img-top 因原始比例不同被 object-fit: cover 裁剪后，人脸可能只露半张，另一张全是背景——这不是等高失败，是构图失控：
- 给
.card-img-top显式设height: 180px或min-height: 180px（统一图片容器高度） - 确保
img标签加img-fluid，防止溢出 - 别用
width: 100%; height: auto，这会让高度浮动，破坏等高一致性 - 若需响应式图片高度，可用
aspect-ratio: 4/3（现代浏览器），配合object-fit: cover和object-position: center
响应式换行后还等高吗
会，只要所有卡片都在同一个 .row 下，且每张卡的直接父级是带 d-flex h-100 的 .col-* 。但要注意：
- 小屏
.col-12时每行 1 张卡，等高无意义，不用干预 - 中屏
.col-sm-6变成两列，两张卡自动等高 - 大屏
.col-xl-3四列，四张卡同高——前提是它们没被额外包裹，比如每个.col外又套了一层<div class="d-flex">，那 <code>.card的h-100就断在那层了 - 别用
.card-deck或.card-group：Bootstrap 5.3+ 已彻底移除，继续用会报Unknown pseudo-class selector ".card-deck"错误，且破坏栅格响应式
最易被忽略的一点：等高依赖于父容器的高度上下文是否连续。哪怕只在某一层加了个 overflow: hidden 或 min-height: 0，都可能切断 h-100 的继承链，导致整行卡片塌缩成最小高度。
