Bootstrap 4 卡片等高需同时满足父容器flex、高度上下文可继承、内部空间可控；card-deck因display:table-cell不支持断行且与Flex冲突而失效；.col须同时加d-flex和h-100，.card-body需d-flex flex-column h-100+flex-grow-1+mt-auto，图片需固定尺寸+object-fit。
Bootstrap 4 中卡片高度不一致不是 bug，是默认流式布局的自然表现；靠 card-deck 或单纯加 h-100 很容易失效，真正有效的解法必须同时满足“父容器是 flex”+“高度上下文可继承”+“内部空间可控”三个条件。
为什么 card-deck 在响应式下会失效
card-deck 在 Bootstrap 4 中用的是 display: table-cell，它天生不支持断行：比如你设了 col-md-4 和 col-sm-6，小屏下本该两列，但 card-deck 会强行把所有卡片塞进一行，撑宽容器甚至溢出。更关键的是，它和 Flex/Grid 容器不兼容——一旦外层用了 row 或自定义 display: flex，card-deck 就直接退化为普通块级元素，等高立刻崩塌。
常见错误现象包括：
- 小屏下卡片横向滚动或内容被裁剪
- 加了
col-sm-6后高度突然不一致 - 控制台报
Unknown pseudo-class selector ".card-deck"（尤其混用 Bootstrap 5 类时）
.col 必须同时加 d-flex 和 h-100
这是最常被忽略的硬性前提：.card 的直接父容器（通常是 .col-md-4 这类列）必须同时具备两个能力：提供 flex 上下文、提供高度基准。只加一个没用。
实操要点：
-
.col上必须写d-flex（激活align-items: stretch），不能只靠.row的 flex -
.col必须加h-100，否则.card的h-100拉的是 0 - 绝对不要给
.col加height、min-height或overflow: hidden，这些会截断高度继承链 - 如果中间多套了一层 （比如
.col > .wrapper > .card），h-100就断在.wrapper，必须删掉或给它也加d-flex h-100.card-body内部对齐要用d-flex flex-column h-100外部高度拉齐后，标题短、文字少的卡片里按钮会堆顶，文字多的又可能把按钮挤出视口——这是因为
.card-body默认仍是流式布局，没接管空间分配。正确做法：
-
.card-body加d-flex flex-column h-100，变成纵向弹性容器 - 正文
加flex-grow-1（不是flex: 1，后者在部分 Bootstrap 4 版本有兼容问题） - 按钮加
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，否则拉伸变形或顶部留白 - 加载慢时图片占位空白，建议给
.card加min-height: 250px兜底，防止初始渲染塌陷 - 禁用
img { width: 100%; height: auto }，这会让图片高度浮动，直接破坏等高前提
最容易被忽略的一点：异步加载内容（比如 JS 动态插入文本或图片）会导致高度重排，纯 CSS 无法响应。这时得用
ResizeObserver监听尺寸变化，或手动触发重绘——别指望加个h-100就一劳永逸。 -
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
