当前位置：首页 > 文章列表 > 文章 > 前端 > Bootstrap5三卡片轮播实现教程

Bootstrap5三卡片轮播实现教程

2026-02-01 08:15:40 0浏览收藏

小伙伴们有没有觉得学习文章很有意思？有意思就对了！今天就给大家带来《Bootstrap 5 三卡片轮播实现方法》，以下内容将会涉及到，若是在学习中对其中部分知识点有疑问，或许看了本文就能帮到你！

Bootstrap 5 多卡片轮播：实现每页显示 3 张卡片的完整方案

本文详解如何在 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 控制）：

<div class="carousel-item active">
  <div class="card-group">
    <div class="card">
      <img src="placeholder1.jpg" class="card-img-top" alt="Card 1">
      <div class="card-body">
        <h5 class="card-title">课程标题 1</h5>
        <p class="card-text">简短描述内容...</p>
      </div>
    </div>
    <div class="card">
      <img src="placeholder2.jpg" class="card-img-top" alt="Card 2">
      <div class="card-body">
        <h5 class="card-title">课程标题 2</h5>
        <p class="card-text">简短描述内容...</p>
      </div>
    </div>
    <div class="card">
      <img src="placeholder3.jpg" class="card-img-top" alt="Card 3">
      <div class="card-body">
        <h5 class="card-title">课程标题 3</h5>
        <p class="card-text">简短描述内容...</p>
      </div>
    </div>
  </div>
</div>

⚠️ 注意事项：
不要混用 Bootstrap 4 和 5：二者 CSS 类名、JS API 和内部逻辑存在重大差异（如 data-slide → data-bs-slide），混用必然导致样式错乱或 JS 报错。始终使用同一版本（推荐 Bootstrap 5.3+）。
避免滥用 .col 嵌套：原问题中在 .carousel-item 内加 .col 并未解决布局逻辑，反而破坏了轮播项的独立容器语义；card-group 已内置响应式断点（≥768px 水平排列，<768px 垂直堆叠），无需额外栅格包裹。
图片与内容需保持比例一致：为确保三张卡片视觉齐整，建议统一设置 card-img-top 高度（如 style="height: 180px; object-fit: cover;"）或使用背景图 + aspect-ratio。

? 完整可运行示例（含指示器与控制按钮）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap 5 三卡轮播</title>
  <!-- Bootstrap 5.3 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- 可选：Bootstrap Icons -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
</head>
<body>
  <div id="multiCardCarousel" class="carousel carousel-dark slide mx-4 my-5" data-bs-ride="false">
    <!-- 指示器 -->
    <div class="carousel-indicators">
      <button type="button" data-bs-target="#multiCardCarousel" data-bs-slide-to="0" class="active" aria-current="true"></button>
      <button type="button" data-bs-target="#multiCardCarousel" data-bs-slide-to="1"></button>
      <button type="button" data-bs-target="#multiCardCarousel" data-bs-slide-to="2"></button>
    </div>

    <!-- 轮播内容 -->
    <div class="carousel-inner">
      <!-- Slide 1: 3 cards -->
      <div class="carousel-item active">
        <div class="card-group h-100">
          <div class="card h-100">
            <div class="card-img-top bg-light d-flex align-items-center justify-content-center" style="height: 180px;">
              <span class="text-muted">封面 1</span>
            </div>
            <div class="card-body d-flex flex-column">
              <h6 class="tanggalMedia1 text-muted">20 MARET 2023</h6>
              <h5 class="descBerita1 flex-grow-1">Lorem ipsum dolor sit amet</h5>
              <div class="btnRead mt-auto"><a href="#" class="text-decoration-none">&#8594;</a></div>
            </div>
          </div>
          <div class="card h-100">
            <div class="card-img-top bg-light d-flex align-items-center justify-content-center" style="height: 180px;">
              <span class="text-muted">封面 2</span>
            </div>
            <div class="card-body d-flex flex-column">
              <h6 class="tanggalMedia1 text-muted">20 MARET 2023</h6>
              <h5 class="descBerita1 flex-grow-1">Consectetur adipiscing elit</h5>
              <div class="btnRead mt-auto"><a href="#" class="text-decoration-none">&#8594;</a></div>
            </div>
          </div>
          <div class="card h-100">
            <div class="card-img-top bg-light d-flex align-items-center justify-content-center" style="height: 180px;">
              <span class="text-muted">封面 3</span>
            </div>
            <div class="card-body d-flex flex-column">
              <h6 class="tanggalMedia1 text-muted">20 MARET 2023</h6>
              <h5 class="descBerita1 flex-grow-1">Sed do eiusmod tempor</h5>
              <div class="btnRead mt-auto"><a href="#" class="text-decoration-none">&#8594;</a></div>
            </div>
          </div>
        </div>
      </div>

      <!-- Slide 2 & 3: 同结构，略... -->
      <div class="carousel-item">
        <!-- 同上结构，替换内容 -->
      </div>
      <div class="carousel-item">
        <!-- 同上结构，替换内容 -->
      </div>
    </div>

    <!-- 控制按钮 -->
    <button class="carousel-control-prev" type="button" data-bs-target="#multiCardCarousel" 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="#multiCardCarousel" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">下一页</span>
    </button>
  </div>

  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

✅ 总结

✅ 推荐方式：每个 .carousel-item 内使用
包裹 3 个 .card；
❌ 禁止方式：混用 Bootstrap 4/5、在 .carousel-item 中滥用 .row/.col 或手动写 CSS 强制浮动；
? 进阶提示：如需自定义每页卡片数（如 4 卡）、添加动画过渡或触控滑动，可结合 Swiper.js 替代原生 carousel，但需放弃部分 Bootstrap 耦合特性。

遵循此方案，即可稳定、语义化、响应式地实现 Bootstrap 5 多卡片轮播，兼顾开发效率与用户体验。

今天关于《Bootstrap5三卡片轮播实现教程》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！