bootstrap 5卡片等高正确方案只有d-flex+h-100组合或原生grid布局；card-deck和card-group已被移除，因其不支持响应式断行且与现代布局冲突。
Bootstrap 5 的卡片默认不会等高，这不是 bug，而是文档流的自然行为；靠 card-deck 或 JS 计算高度是过时且不可靠的做法——正确路径只有两条：d-flex + h-100 组合，或原生 grid 布局。
为什么 card-deck 和 card-group 不能用
Bootstrap 5.3+ 已彻底移除 .card-deck 和 .card-group 类。它们在 v4 中依赖 display: table-cell 或硬编码的 flex: 1，导致两个致命问题：不支持响应式断行（小屏仍强行横排），且与现代 grid 或嵌套 flex 容器冲突。控制台可能报 Unknown pseudo-class selector ".card-group"，页面布局也可能静默错乱。
常见翻车现象包括：卡片在手机上堆叠后高度反而更不一致、按钮位置飘忽、图片被裁剪失衡。
-
.card-deck在row内会失效，因为row是 flex 容器，而card-deck又试图覆盖为 table-cell - 即使没报错，它也会禁用
col的响应式断点逻辑，让col-md-4在小屏下仍占 1/3 宽度 - 别指望用
order-*或align-self补救——这些类只对直接 flex 子项生效，而卡片通常嵌套在.col里
用 d-flex + h-100 实现稳定等高
这是兼容性最好、语义最清晰的方案，核心在于让 .card 的**直接父元素**成为 flex 容器，并提供可继承的高度上下文。
关键条件缺一不可：
-
.col（不是.row）必须加d-flex h-100—— 因为.card的直接父级是.col，.row只负责列分布 -
.card自身必须加h-100，否则它仍按内容撑高 -
.row需有高度来源：要么由内容撑开，要么加min-height: 300px等兜底；单纯h-100在.row上无效，因它的父级（如body）通常无显式高度
含 card-header 或 card-footer 时，仅靠 h-100 会导致 card-body 溢出或塌缩。此时需把 .card 设为 flex 容器：
<div class="card h-100 d-flex flex-column"> <div class="card-header">标题</div> <div class="card-body flex-fill"><p>正文自适应拉伸</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a> <p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></div> <div class="card-footer">底部</div> </div>
用 grid 布局替代（Bootstrap 5.3+ 推荐）
如果你不需要支持 IE11，grid 是更简洁、更可靠的方案。它天然等高，无需层层 h-100，且响应式列数控制更直观。
最小可行写法：
- 容器加
display: grid和grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) - 卡片自身不要设
height、min-height或flex相关类，保持默认display: block - 内部对齐仍需
d-flex flex-column h-100+flex-grow-1+mt-auto控制按钮沉底
注意：别混用 .row 和 grid。一旦父容器用了 display: grid，.row 的 display: flex 规则会被覆盖，导致栅格失效。
示例 CSS：
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1rem;
}
图片和文字对齐容易被忽略的细节
等高后，视觉“假等高”往往来自图片和文字的处理不当：
-
.card-img-top默认object-fit: cover，不同原始比例的图会被不一致裁剪——建议统一设height: 180px或用aspect-ratio: 4/3（Chrome 88+ 支持） - 文字少时按钮上浮？给
.card-body加d-flex flex-column h-100，正文p加flex-grow-1，按钮加mt-auto（比align-self-end更稳） - 小屏堆叠后等高失效？检查是否只在
md断点加了h-md-100——堆叠时.col是块级单列，h-100必须是全断点生效的h-100
真正难的不是让卡片“看起来一样高”，而是让每张卡片内部的内容节奏可控。高度统一只是表象，内容结构的弹性才是关键。漏掉 .card-body 的 flex-column 或忘了 flex-fill，再完美的外层等高也会在按钮位置上露馅。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
