本文详解 bootstrap 轮播组件（carousel）在实现“每页显示 3 个课程卡片”时常见失效原因，涵盖 html 结构规范、css 样式冲突排查、javascript 初始化要点，并提供可直接运行的完整示例代码。
Bootstrap 官方 Carousel 组件默认仅支持单张幻灯片切换，若需实现「每页展示 3 个课程卡片」的横向滚动效果（如图中所示的三列布局轮播），必须结合自定义 CSS + JavaScript（或使用第三方插件如 Owl Carousel），单纯依赖原生 .carousel 类无法自动完成多项目分页。常见失效原因包括：结构嵌套错误、缺失关键类名、未引入 Bootstrap JS 或 jQuery（v4/v5 版本差异）、CSS 覆盖导致 .carousel-inner 高度坍塌或 .carousel-item 显示异常。
✅ 正确实现方式（Bootstrap 5.3+ 推荐方案）
以下为兼容 Bootstrap 5.3+ 的纯原生实现（无需 jQuery），通过 data-bs-interval 控制自动播放，配合 Flex 布局实现单页三卡：
⚠️ 关键注意事项
- 结构强制要求：每个 .carousel-item 必须包裹一整行（.row）的 3 个 .col-* 卡片；不能将 6 张卡片平铺在同一个 .carousel-item 内（否则无法分页）。
- 响应式适配：使用 col-md-4 确保中屏及以上每行 3 列；小屏自动堆叠（col-12 可选增强）。
- 高度一致性：为 .card 添加 h-100 并确保图片尺寸统一，避免轮播容器因高度波动而抖动。
-
JS 初始化检查：
- Bootstrap 5+ 使用 bootstrap.bundle.min.js（含 Popper），不再依赖 jQuery；
- 确保
