本文详解 bootstrap carousel 在实现“每页显示 3 项内容”时常见失效原因，涵盖 html 结构规范、必需的 css/js 引入、响应式适配要点，并提供可直接运行的完整代码示例与调试建议。
Bootstrap 官方 Carousel 组件默认仅支持单图滑动，若需实现「每页显示 3 个课程卡片并横向轮播」的效果（如题中所述），必须结合自定义 CSS + JavaScript（或使用第三方插件如 Owl Carousel），单纯复制基础 Carousel 示例必然失效——这正是多数开发者遇到“轮播不动”“布局错乱”“点击无响应”等问题的根本原因。
✅ 正确实现方式（原生 Bootstrap + 自定义增强）
以下为基于 Bootstrap 5 的完整、可运行方案（兼容移动端）：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>三图轮播课程展示</title>
<!-- Bootstrap 5.3 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 自定义样式：关键！实现每页3项 -->
<style>
.carousel-inner {
overflow: visible; /* 防止子项被裁剪 */
}
.carousel-item {
display: flex;
justify-content: center;
align-items: center;
min-height: 300px;
}
.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
display: flex;
transform: translateX(0);
}
.carousel-item:not(.active) {
transform: translateX(0);
}
.course-row {
display: flex;
width: 100%;
gap: 1rem;
justify-content: center;
}
.course-card {
flex: 0 0 calc(33.333% - 0.666rem); /* 3列等宽，含gap */
max-width: calc(33.333% - 0.666rem);
transition: all 0.3s ease;
}
@media (max-width: 768px) {
.course-card {
flex: 0 0 100%;
max-width: 100%;
}
}
</style>
</head>
<body>
<div id="courseCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<!-- 第一页：3门课程 -->
<div class="carousel-item active">
<div class="course-row">
<div class="course-card bg-light p-3 rounded shadow-sm border">
<h5>前端开发入门</h5>
<p>HTML/CSS/JS 基础实战</p>
</div>
<div class="course-card bg-light p-3 rounded shadow-sm border">
<h5>Python 数据分析</h5>
<p>Pandas + Matplotlib 实战</p>
</div>
<div class="course-card bg-light p-3 rounded shadow-sm border">
<h5>UI 设计原理</h5>
<p>Figma 与用户研究方法</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill4914" title="VPS Bootstrap"><img
src="https://img.php.cn/upload/skill/000/000/081/179025304626966.jpg" alt="VPS Bootstrap" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill4914" title="VPS Bootstrap">VPS Bootstrap</a>
<p>从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。</p>
</div>
<a href="/xiazai/skill4914" title="VPS Bootstrap" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
</div>
</div>
</div>
<!-- 第二页：另3门课程 -->
<div class="carousel-item">
<div class="course-row">
<div class="course-card bg-light p-3 rounded shadow-sm border">
<h5>Node.js 后端开发</h5>
<p>Express + MongoDB 全栈实践</p>
</div>
<div class="course-card bg-light p-3 rounded shadow-sm border">
<h5>机器学习导论</h5>
<p>Scikit-learn 快速上手</p>
</div>
<div class="course-card bg-light p-3 rounded shadow-sm border">
<h5>移动应用开发</h5>
<p>React Native 跨平台实战</p>
</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">上一组</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">下一组</span>
</button>
</div>
<!-- Bootstrap JS（必须在 body 底部引入） -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>⚠️ 关键注意事项（排查失效核心）
- 依赖完整性：确保同时引入了 Bootstrap CSS 和 Bootstrap Bundle JS（含 Popper）；缺少 JS 将导致轮播完全无交互。
- 结构合法性：.carousel-item 内必须包裹 .course-row（flex 容器），不可直接将 .course-card 并列置于 .carousel-item 下——否则 Carousel 无法正确计算高度与过渡。
- CSS 覆盖风险：检查是否全局重置了 transform、display 或 overflow 属性，尤其注意 .carousel-item 的 transform: translateX() 是否被意外覆盖。
- 响应式降级：小屏幕（≤768px）自动转为单列，避免拥挤；若需始终三列，请移除媒体查询并调整 flex-basis。
-
图片加载问题：若卡片内含
，请确保 src 有效且添加 loading="lazy"，避免因图片加载失败导致布局塌陷。
? 进阶建议
- 如需无缝无限滚动、鼠标悬停暂停、触摸拖拽等功能，推荐使用轻量级插件 Owl Carousel 2 或 Swiper，它们原生支持多列轮播配置，大幅降低定制成本。
- 开发阶段务必使用浏览器 DevTools 检查：
- .carousel-item.active 是否存在；
- 点击控制按钮时，data-bs-slide 是否触发事件；
- 控制台是否有 Uncaught ReferenceError: bootstrap is not defined 类错误。
通过以上结构化实现与系统性排查，即可彻底解决“Bootstrap Carousel 三图轮播不工作”的典型问题，让课程展示既专业又稳定。
