本文详解 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 布局实现单页三卡：
<!-- 引入 Bootstrap 5.3 CSS 和 JS（务必按顺序） -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<div id="courseCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="5000">
<!-- 轮播指示器（可选） -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#courseCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#courseCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
</div>
<!-- 轮播内容区 -->
<div class="carousel-inner py-4">
<!-- 第一页：3 个课程 -->
<div class="carousel-item active">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-4 mb-4">
<div class="card h-100">
<img src="course1.jpg" class="card-img-top" alt="课程1">
<div class="card-body">
<h5 class="card-title">前端开发入门</h5>
<p class="card-text">HTML/CSS/JS 基础实战</p>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card h-100">
<img src="course2.jpg" class="card-img-top" alt="课程2">
<div class="card-body">
<h5 class="card-title">Python 数据分析</h5>
<p class="card-text">Pandas & Matplotlib 实战</p>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card h-100">
<img src="course3.jpg" class="card-img-top" alt="课程3">
<div class="card-body">
<h5 class="card-title">UI 设计原理</h5>
<p class="card-text">Figma 与用户体验设计</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 第二页：另 3 个课程 -->
<div class="carousel-item">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-4 mb-4">
<div class="card h-100">
<img src="course4.jpg" class="card-img-top" alt="课程4">
<div class="card-body">
<h5 class="card-title">Node.js 后端开发</h5>
<p class="card-text">Express 框架全栈实践</p>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card h-100">
<img src="course5.jpg" class="card-img-top" alt="课程5">
<div class="card-body">
<h5 class="card-title">机器学习基础</h5>
<p class="card-text">Scikit-learn 入门建模</p>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card h-100">
<img src="course6.jpg" class="card-img-top" alt="课程6">
<div class="card-body">
<h5 class="card-title">React 全面指南</h5>
<p class="card-text">Hooks 与状态管理实战</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 左右控制按钮 -->
<button class="carousel-control-prev" type="button" data-bs-target="#courseCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#courseCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>⚠️ 关键注意事项
- 结构强制要求：每个 .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；
- 确保 <script> 标签置于 </script>
