bootstrap 5 彻底移除了 .card-deck 类，需改用 .row + .col（配 h-100）或启用 css grid 的 .grid + .g-col-* 实现卡片布局，且必须严格遵守层级结构。
Bootstrap 5 中 .card-deck 直接失效，不是“不推荐”，是源码里没了
如果你从 Bootstrap 4 项目复制了带 .card-deck 的代码到 Bootstrap 5.3+ 环境中，浏览器控制台不会报错，但卡片会塌成一列、无间距、高度不一致，甚至触发水平滚动条——因为这个类在官方源码中已被彻底删除，CSS 规则不存在了。它不是被“标记废弃”，而是物理移除。
根本原因不是为了“精简 API”，而是 Bootstrap 5 明确转向组合式布局：用标准栅格（.row + .col）或原生 CSS Grid 替代硬编码的语义类。这样更可控、更易调试，也避免了 .card-deck 自身的缺陷：等高逻辑僵硬、断点响应不灵活、阴影被裁剪。
用 .row + .col 替代时，h-100 必须写两处，漏一个就等高失败
.row 默认是 display: flex，但它只提供主轴布局能力，不自动拉伸子项高度。卡片等高必须满足两个条件：
-
.col容器本身要有明确高度上下文，比如加h-100 -
.card自身也要加h-100，否则它仍按内容撑高 - 不能跳过中间层，结构必须是
<div class="row"><div class="col-md-4 h-100"><div class="card h-100"></div></div></div> - 别混用
.card-group，它自带overflow: hidden，会切掉.shadow边缘
.row-cols-* 和 CSS Grid 是两套东西，别混着用
.row-cols-3 是 Bootstrap 5 内置的 Flex 工具类，作用于 .row，让每行固定显示 3 列卡片；它和 CSS Grid 无关，也不需要启用 $enable-cssgrid。
而真正用 CSS Grid，得走另一条路：
- 必须在 Sass 编译阶段启用
$enable-cssgrid: true，CDN 引入的 CSS 文件默认不包含.g-col-*类 - 启用后，
.grid容器 +.g-col-6才生效；.col-6塞进.grid里会失效，因为宽度逻辑依赖 Flex 行为 -
.row-cols-*在小屏下会退化（如.row-cols-sm-2在 xs 下变单列），但这是设计行为，不是 bug
真正容易被忽略的，是结构语义和类名约束的刚性
所有问题——等高不生效、阴影被裁、卡片堆叠、响应断点错乱——几乎都源于同一类操作：跳过 .row、漏掉 h-100、混用 .card-group、或把 .col-* 错塞进 .grid 容器。Bootstrap 5 不再容忍“差不多就行”的嵌套，它要求你严格遵守 row → col → card 或 grid → g-col → card 的层级链。一旦松动，样式就会悄悄回退到普通块级流，而你可能要花半小时在 DevTools 里反复检查 computed height 和 display 类型才意识到问题出在哪一层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
