加 h-100 不等高是因为 .col 非 flex 容器且无显式高度，需同时设 d-flex 和 h-100；.card-body 要 d-flex flex-column h-100，正文用 flex-grow-1，按钮用 mt-auto；图片需统一定高+object-fit: cover。
为什么加了 h-100 还是不等高
因为 h-100 只表示“占父容器 100% 高度”，而 Bootstrap 4 的 .col 默认不是 flex 容器，也没有显式高度——它只是块级盒子，高度完全由内容撑开。所以 .card.h-100 拉的其实是 0。真正起作用的是让 .card 的**直接父容器**（通常是 .col-md-4）同时满足两个条件：
-
.col必须加d-flex（激活 flex 布局，使align-items: stretch生效） -
.col必须加h-100（提供可继承的高度基准） - 不能在
.col上写height、min-height或overflow: hidden，这些会截断高度继承链 - 如果中间嵌了额外 wrapper（比如
<div class="wrapper"><div class="card">），h-100就断在wrapper上
怎么给 .card-body 内部内容对齐到底部
外部等高后，标题短、文字少的卡片里按钮会堆顶；文字多的又可能把按钮挤出视口——这不是高度没拉满，而是 .card-body 还在用流式布局，没接管内部空间分配。
-
.card-body必须加d-flex flex-column h-100（变成纵向弹性容器） - 正文
<p class="card-text">加flex-grow-1（吃掉中间空白；别用flex: 1，Bootstrap 4.6+ 有兼容问题） - 按钮加
mt-auto（比align-self-end更稳定，不受文字行数影响） - 绝对不要给
.card-body写height或min-height，否则会撑破或截断整体高度
图片尺寸差异导致“看起来不等高”怎么办
即使所有 .card 高度一致，.card-img-top 因原始比例不同被 object-fit: cover 裁剪后，构图可能严重失衡：一张卡露人脸，另一张只剩衣角。这不是等高失败，是视觉错觉。
- 给
.card-img-top显式设height: 180px（或min-height: 180px），统一图片容器高度 - 必须配
object-fit: cover和object-position: center，避免拉伸或顶部留白 - 别用
img { width: 100%; height: auto }——这会让高度浮动，直接破坏等高前提 - 加载慢时图片占位为空白，建议给
.card加min-height: 250px兜底，防初始塌陷
响应式换行后还等高吗
会，但只限于同一行内的卡片。小屏下 .col-12 每行 1 张卡，等高无意义；中屏 .col-sm-6 两列，两张卡自动等高；大屏 .col-xl-3 四列，四张卡同高——前提是它们都在同一个 .row 下，且没被额外包裹。
立即学习“前端免费学习笔记（深入）”；
- 检查是否用了已废弃的
.card-deck或.card-group：Bootstrap 4 中.card-group已弃用，.card-deck是 table-cell 实现，不支持断行、无法嵌套 flex，现代项目应彻底避免 - 别在媒体查询里覆盖
d-flex或重写align-items，比如@media (max-width: 768px) { .row { align-items: flex-start !important; } }会让等高失效 - 图片务必加
img-fluid，否则溢出会撑破卡片高度计算
.col 的 d-flex h-100 必须同时存在，缺一不可；而任何一层额外 wrapper 都会让高度继承链中断——这点在调试时几乎总是被跳过。 
