加了h-100仍不等高是因为父容器无显式高度，且.col需同时加d-flex和h-100才能激活flex拉伸；.card-body也需d-flex flex-column h-100并用flex-grow-1和mt-auto控制内部布局。
为什么加了 h-100 还是不等高
因为 h-100 只表示“占满父容器 100% 高度”，但前提是父容器得有高度可继承。而 Bootstrap 的 .col 默认高度由内容撑开，没内容时就是 0；.row 也不会给子列设最小高度。
常见断链点包括：
-
.card的直接父级不是.col（比如中间多套了一层<div>），h-100就断在半路 -
.col上写了height、min-height或overflow: hidden，截断高度继承 -
.card-body里写了height: 200px或min-height: 100%，覆盖了外部h-100的拉伸效果 - 图片加载慢时，
.card初始高度为 0，h-100拉的也是 0 —— 建议加min-height: 200px兜底
.col 必须加 d-flex h-100 才有效
真正起作用的是让 .card 的**直接父容器**变成 Flex 容器，并启用交叉轴拉伸。Bootstrap 的 .row 是 flex，但 .col 不是容器，只是 flex 项目。
必须显式激活它：
-
.col-md-4这类列容器要同时加d-flex（激活 flex）和h-100（提供高度基准） - 如果父级
.row高度由内容决定，.col默认无显式高度，h-100才能生效 - 别在
.col上加flex: none或align-self: flex-start，会破坏align-items: stretch - 响应式下失效？检查媒体查询是否悄悄重写了 flex 行为，比如
@media (max-width: 768px) { .row { align-items: flex-start !important; } }
.card-body 内部对齐要用 d-flex flex-column h-100
即使外部高度统一了，标题、正文、按钮仍可能堆顶或悬浮——因为 .card-body 还是流式布局，没接管内部空间分配。
正确做法：
-
.card-body加d-flex flex-column h-100，变成纵向弹性容器 - 正文
<p class="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 和旧版 Safari 不支持 - 别用
img { width: 100%; height: auto }——这会让高度随原始比例浮动，破坏等高效果
.col 这一层的 flex 激活与高度上下文，而不是 .row 或 .card 自身；只要中间任意一层打断了这个链条，比如加了多余 wrapper 或写了冲突的 height，整个机制就失效。 
