卡片等高需在 .col 上同时加 d-flex 和 h-100，使 .card-body 用 d-flex flex-column + flex-grow-1 + mt-auto 实现内容自适应；图片设固定高度或 aspect-ratio 并配 object-fit: cover；优先用 CSS Grid（d-grid）替代 flex，IE11 则回退 flex；务必添加 viewport meta 标签。
卡片高度不一致不是写错了，是 Bootstrap 默认流式布局的自然结果；等高必须靠 d-flex + h-100 组合在正确层级上激活，而不是给 .card 单独加类。
为什么直接加 h-100 到 .card 没用
因为 .card 的父容器（通常是 .col-md-4）默认没有明确高度，h-100 继承的是 0 或内容撑开的微小高度。它不是“没生效”，而是没东西可拉。
-
.col必须同时加d-flex（让它成为 flex 容器）和h-100（提供可继承的高度） - 如果
.row高度也不足，得靠内容撑开，或加min-height: 300px这类兜底 - 别在
.col上写height、overflow: hidden或flex: none，这些会截断高度传递链 - 嵌套 wrapper（比如
<div class="wrapper"><div class="card">）会让 <code>h-100在 wrapper 就断掉怎么让同一行卡片真正等高
关键不在卡片之间互相拉伸，而在每张卡片内部用
d-flex flex-column主动分配空间，使底部按钮对齐。-
.card和.card-body都要加h-100 -
.card-body加d-flex flex-column h-100，变成纵向弹性容器 -
.card-text加flex-grow-1（不是flex: 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，不依赖原始尺寸 - 必须配
object-fit: cover+object-position: center，否则拉伸变形或顶部留白 - 现代项目可用
aspect-ratio: 4/3替代固定 height，但注意 IE 不支持 - 图片加载慢时高度为 0，会导致布局跳动；预设高度能缓解
要不要用
grid替代flexBootstrap 5.3+ 原生支持
grid，卡片天然等高，写法更简洁，但浏览器兼容性需确认。- 容器加
class="d-grid"或自定义.card-grid { display: grid; } - 用
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))实现响应式列数 -
.card上不用h-100，grid item 默认 stretch - 禁用
card-group或card-deck，它们已废弃，且与 grid 冲突 - IE11 不支持 grid，若需兼容，仍得走
d-flex路线
最易被忽略的一点：viewport meta 标签必须存在——
<meta name="viewport" content="width=device-width, initial-scale=1">缺了它，所有断点类（col-sm-6、col-md-4）全失效，h-100和d-flex在小屏下也形同虚设。 -
