.card-group在Bootstrap 5中已被移除，因不支持响应式断点、无法等高对齐多行卡片且语义过时；推荐改用row+col-*组合实现灵活栅格布局与统一间距控制。
Bootstrap 的 card-group 在 v5 中已废弃，不推荐用于新项目；它无法响应式断点控制、不能等高对齐多行卡片、且语义和布局逻辑已被更灵活的 row + col-* 取代。
为什么 card-group 现在基本不用了
它在 Bootstrap 5.0 正式版中被移除，官方文档不再收录，CDN 加载的 BS5 CSS 文件里压根没有 .card-group 的样式规则。如果你在代码里写了这个类，浏览器会静默忽略——既不报错，也不生效。
即便你用的是 Bootstrap 4（还保留该类），它也只支持单行卡片强制等高，一旦换行就彻底失效：第二行卡片高度由各自内容决定，视觉割裂严重。
- 它内部用
display: flex+flex-wrap: nowrap，导致小屏下卡片横向溢出，出现水平滚动条 - 不识别
col-sm-6这类断点类，无法随视口宽度自动调整列数 - 卡片间距靠
margin-right硬控，最后一张卡右边永远多出空白
row + col-* 是当前唯一可靠方案
把每张卡片放进一个 .col-* 容器，再用 .row 包裹，就能让栅格系统接管所有响应逻辑。这才是 Bootstrap 5 推荐的卡片组写法。
-
col-12 col-sm-6 col-md-4 col-lg-3组合，可实现手机单列 → 平板双列 → 桌面三列 → 大屏四列 - 同一行内所有
.card加h-100，即可自然等高（前提是.card是.col-*的直接子元素） - 卡片之间间距统一用
mb-4或g-4（配合row上的gy-4），比手动写margin-bottom更稳定 - 不需要额外 JS，不依赖任何第三方插件，纯 CSS 媒体查询驱动
哪些场景下你还可能看到 card-group
仅限维护老项目（Bootstrap 4.x 且未升级）、或某些 UI 库封装的遗留组件中。但要注意：
- 若页面同时加载 BS4 和 BS5 的 CSS，
card-group行为不可预测，可能部分生效、部分塌陷 - 它不支持键盘焦点管理，
role="button"和tabindex="0"需手动补全，否则不符合无障碍要求 - 图片使用
.card-img-top时，card-group不会重置其 margin，容易和相邻卡片贴得太近
真正难的不是怎么让卡片“看起来像一组”，而是让它们在 iPad 竖屏（768px）、折叠屏横屏（~800px）、2K 显示器（2560px）下都保持呼吸感和对齐基准——这必须靠栅格断点逐层声明，而不是寄希望于某个“自动对齐”的旧类名。
