为什么Bootstrap卡片组Card-group卡片高度不一致-Bootstrap教程-PHP中文网

Bootstrap 5.3+ 已移除 .card-group，应改用 .row > .col 结构，并确保 .col 同时添加 d-flex 和 h-100；图片需统一 aspect-ratio 或 object-position；.card-body 需 d-flex flex-column h-100 + flex-grow-1 + mt-auto。

为什么bootstrap卡片组card-group卡片高度不一致

因为 .card-group 在 Bootstrap 5.3+ 中已被彻底移除，继续使用会直接失效或触发 CSS 解析错误，根本无法实现等高。

Bootstrap 5.3+ 已删除 `.card-group` 类

你看到的“高度不一致”，大概率不是布局问题，而是类名根本没生效：.card-group 自 Bootstrap 5.3 起已从源码中移除。浏览器控制台会出现类似 Unknown pseudo-class selector ".card-group" 的警告，CSS 规则压根没加载，自然谈不上等高逻辑。

官方文档和 Bootstrap 5.3.8 编译版中均无该类，所有依赖它的旧代码都会退化为普通
别试图在自定义 CSS 里重写 .card-group —— 它原本的等高机制（基于 display: table）在现代 Flex 布局下既冗余又难维护


如果你项目里还留着 ，请立刻替换成  或语义更清晰的容器

.col 上漏掉 d-flex 和 h-100 是真凶
即使你已改用 .row > .col > .card 结构，卡片仍不等高，核心原因是：.col 没同时加 d-flex 和 h-100。这两个类必须共存，缺一不可：


d-flex：让 .col 成为 Flex 容器，激活 align-items: stretch（这才是拉伸子项的底层机制）

h-100：给 .col 提供可继承的高度基准；没有它，.card.h-100 拉的还是 0
常见错误：只加 h-100 不加 d-flex → .card 高度仍由内容撑开；或反过来，只加 d-flex 不加 h-100 → .card 拉不满

图片原始尺寸差异造成“视觉不等高”
所有卡片实际高度一致，但用户觉得“不齐”，往往是因为 .card-img-top 的原始比例不同，object-fit: cover 裁剪区域不一致：

											
												
												
													VPS Bootstrap
													从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。
												
												下载
												
											
										

一张图是 4:3，另一张是 16:9，即使都设了 height: 180px，裁剪后露出的人脸/主体位置完全不同
解决方法不是调高度，而是统一构图：加 object-position: center 确保居中裁剪，再配合 min-height: 180px 或 aspect-ratio: 4/3（现代浏览器）固定容器比例
绝对避免 img { width: 100%; height: auto } —— 这会让图片高度浮动，直接破坏等高前提


.card-body 内部没接管空间分配
外部高度拉满后，按钮堆顶、文字悬浮、底部留白不均——这说明 .card-body 还在用流式布局，没参与空间管理：

必须给 .card-body 加 d-flex flex-column h-100，让它成为纵向弹性容器

 加 flex-grow-1（不是 flex: 1），吃掉中间空白
按钮加 mt-auto 推到底部；别用 margin-top: auto 或 align-self-end，后者在某些版本有兼容问题
严禁给 .card-body 设 height 或 min-height，会截断外部 h-100 的继承链

真正卡住的点永远在 .col —— 它是唯一能同时提供 Flex 上下文和高度基准的位置。任何在 .row 或中间 wrapper 上加 h-100 的尝试，都会在响应式断点切换时突然失效。