本文详解如何在 bootstrap 5 中正确构建多卡片轮播组件，通过 `card-group` + `carousel-item` 组合实现每页展示 3 张等高卡片，并规避 bootstrap 版本混用冲突。
在 Bootstrap 5 中，默认轮播（.carousel）每次仅渲染一个 .carousel-item，而每个 item 默认容纳单个内容块。若希望每页展示 3 张卡片（Cards），关键在于：不依赖栅格系统（如 .row/.col）强行堆叠，而是使用语义化、响应式更强的 .card-group 容器嵌套在每个 .carousel-item 内部——这是 Bootstrap 5 官方推荐且兼容性最佳的方案。
✅ 正确结构：carousel-item → card-group → 3×card
每个 .carousel-item 应包裹一个 .card-group，其内部直接并列放置 3 个 .card。card-group 会自动为子卡片设置统一高度、去除边框间距，并在小屏下堆叠，在中大屏上水平排列（响应式行为由 Bootstrap 内置 CSS 控制）：
@@##@@课程标题 1
简短描述内容...
@@##@@课程标题 2
简短描述内容...
@@##@@课程标题 3
简短描述内容...
⚠️ 注意事项：不要混用 Bootstrap 4 和 5：二者 CSS 类名、JS API 和内部逻辑存在重大差异（如 data-slide → data-bs-slide），混用必然导致样式错乱或 JS 报错。始终使用同一版本（推荐 Bootstrap 5.3+）。避免滥用 .col 嵌套：原问题中在 .carousel-item 内加 .col 并未解决布局逻辑，反而破坏了轮播项的独立容器语义；card-group 已内置响应式断点（≥768px 水平排列，
? 完整可运行示例（含指示器与控制按钮）
Bootstrap 5 三卡轮播
✅ 总结
- ✅ 推荐方式：每个 .carousel-item 内使用 包裹 3 个 .card；
- ❌ 禁止方式：混用 Bootstrap 4/5、在 .carousel-item 中滥用 .row/.col 或手动写 CSS 强制浮动；
- ? 进阶提示：如需自定义每页卡片数（如 4 卡）、添加动画过渡或触控滑动，可结合 Swiper.js 替代原生 carousel，但需放弃部分 Bootstrap 耦合特性。
遵循此方案，即可稳定、语义化、响应式地实现 Bootstrap 5 多卡片轮播，兼顾开发效率与用户体验。
