bootstrap 5.3+ 已彻底移除 .card-deck 类，需改用 row + col 实现并排卡片布局；必须严格遵循 row → col → card 结构，并为 col 和 card 同时添加 h-100 才能等高，且避免 card-group 以防止阴影被裁剪。
card-deck 在 Bootstrap 5 中直接报错或失效
因为 .card-deck 类在 Bootstrap 5.3+ 版本中已被彻底移除，不是“不推荐”，而是源码里根本不存在了。如果你从旧项目复制代码并加上 card-deck，浏览器控制台不会报错，但样式完全不生效——卡片会塌成一列、无间距、无等高，甚至出现水平滚动条。
根本原因是：Bootstrap 5 放弃了为特定布局（如“并排卡片组”）硬编码专用类，转而鼓励用标准栅格系统组合实现，更可控也更符合现代 CSS 实践。
用 row + col 替代 card-deck 的实操要点
核心结构是 <div class="row"><div class="col"><div class="card">...</div></div></div>，靠栅格断点控制列数和换行：
-
col-12：小屏单列 -
col-sm-6：≥576px 时两列 -
col-md-4：≥768px 时三列 -
col-lg-3：≥992px 时四列
注意：.row 自带负边距抵消 .col 的 padding，避免外边距塌陷；不需要额外清浮动或设置 display: flex —— Bootstrap 5 的 .row 默认就是 display: flex。
卡片等高必须手动加 h-100，且父容器要支持 Flex
只写 row + col 不保证等高，因为 .card 默认按内容撑高。要让所有卡片拉满高度，得满足两个条件：
- 卡片的直接父容器（即
.col）需有明确高度上下文，比如设h-100 - 卡片自身加
h-100类，强制占满父容器高度
示例结构：<div class="row"><div class="col-md-4 h-100"><div class="card h-100">...</div></div></div>。漏掉任一 h-100，等高就失效。
阴影被裁剪？别用 card-group，改用 row+col 就自然解决
很多人想保留阴影效果，却误用 card-group —— 它内部用了 overflow: hidden，直接把卡片边缘的 shadow 阴影切掉了。结果是：每个卡片明明写了 shadow-lg，渲染出来只有最外一圈有影子。
解决方案很简单：放弃 card-group，改用 row + col 布局。此时每个 .card 是独立 DOM 节点，阴影不会被父容器裁剪，shadow-sm / shadow / shadow-lg 全部正常生效。
真正容易被忽略的是：等高和阴影这两件事，都依赖于你是否严格遵守“row → col → card”三层嵌套结构，且不能跳过任何一层的语义和类名约束。漏掉一个 h-100 或混用 card-group，问题就会悄悄回来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
