卡片高度不一致不是代码错误，而是流式布局的必然结果：.card 高度由内容撑开，小屏换行多、图片未加载时高度为0；等高需在直接父容器（如 .col）上同时加 d-flex 和 h-100，.card-body 用 d-flex flex-column h-100 + flex-grow-1 + mt-auto 实现内部对齐；图片需固定高度或 aspect-ratio 并配 object-fit: cover。
为什么卡片在不同分辨率下高度不一致
不是代码写错了，是默认流式布局的必然结果：.card 高度由内部内容撑开，标题行数、图片原始比例、文字长度一变，高度就跟着变。小屏下文字换行更多，可能反而比大屏还高；图片加载慢时，.card 初始高度为 0，h-100 拉的也是 0。这不是 bug，是 Bootstrap 的栅格和卡片设计本意——它不承诺等高，只提供基础结构。
让 .col 成为真正的 flex 容器并提供高度基准
关键不在 .card 上加什么类，而在它的**直接父容器**（通常是 .col-md-4 这类列）是否同时满足两个条件：是 flex 容器，且自身有可继承的高度。
-
.col必须加d-flex（激活 flex 布局，否则align-items: stretch不生效） -
.col必须加h-100（提供高度上下文，否则.card的h-100无处可拉） - 不能在
.col上写height、min-height或overflow: hidden，这些会截断高度继承链 - 如果用了嵌套 wrapper（比如
<div class="wrapper"><div class="card">），h-100就断在 wrapper 上，.card拉不到底
卡片内部内容对齐不能靠 margin 或 text-align
外部高度统一后，标题堆顶、按钮悬浮、正文留白不均——这是 .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 不支持） - 别用
img { width: 100%; height: auto }，这会让高度浮动，彻底破坏等高效果
最易忽略的是 .col 的双重角色：它既是栅格单位，又是 .card 的直接父容器。一旦漏掉 d-flex 或 h-100 其中一个，整个等高链就断了，且错误不报错，只表现为“好像写了但没用”。
