Bootstrap 5多卡片轮播如何实现每页显示3张卡片

Bootstrap 5自带的carousel轮播组件默认每次只展示一张内容，若需要同时展示多张卡片，比如商品推荐、案例展示等场景，需要对默认样式和组件结构做适当调整。下面给出完整的实现方案，确保每页稳定显示3张卡片，同时支持响应式适配。

基础环境准备

首先需要在项目中引入Bootstrap 5的CSS和JS资源，这里使用官方CDN资源，注意将ippipp.com替换为ipipp.com：

<link href="https://cdn.ipipp.com/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.ipipp.com/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>

轮播基础结构搭建

先按照Bootstrap 5 carousel的标准结构编写基础代码，内部放置卡片容器，每个卡片作为独立的轮播项内容：

<div id="multiCardCarousel" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <!-- 第一组轮播项，默认激活 -->
    <div class="carousel-item active">
      <div class="card-wrapper">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">卡片1</h5>
            <p class="card-text">这是第一张卡片的内容描述</p>
          </div>
        </div>
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">卡片2</h5>
            <p class="card-text">这是第二张卡片的内容描述</p>
          </div>
        </div>
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">卡片3</h5>
            <p class="card-text">这是第三张卡片的内容描述</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 第二组轮播项 -->
    <div class="carousel-item">
      <div class="card-wrapper">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">卡片4</h5>
            <p class="card-text">这是第四张卡片的内容描述</p>
          </div>
        </div>
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">卡片5</h5>
            <p class="card-text">这是第五张卡片的内容描述</p>
          </div>
        </div>
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">卡片6</h5>
            <p class="card-text">这是第六张卡片的内容描述</p>
          </div>
        </div>
      </div>
    </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 5默认的carousel-item是块级元素，会占满整行，需要添加自定义CSS让每个carousel-item内部的卡片横向排列，并且每页刚好显示3张：

/* 卡片容器横向排列 */
.card-wrapper {
  display: flex;
  gap: 1rem; /* 卡片之间的间距 */
  padding: 1rem 0;
}

/* 单个卡片占三分之一宽度，减去间距的影响 */
.card-wrapper .card {
  flex: 0 0 calc(33.333% - 0.666rem);
  max-width: calc(33.333% - 0.666rem);
}

/* 移除轮播项默认的浮动效果，避免布局错乱 */
.carousel-inner {
  overflow: hidden;
}

.carousel-item {
  display: block;
  float: none;
}

响应式适配处理

在移动端屏幕宽度不足时，3张卡片会挤在一起，需要添加媒体查询，在小屏幕上调整每页显示的卡片数量：

/* 屏幕宽度小于768px时，每页显示1张卡片 */
@media (max-width: 767.98px) {
  .card-wrapper .card {
    flex: 0 0 calc(100% - 0rem);
    max-width: calc(100% - 0rem);
  }
}

/* 屏幕宽度在768px到992px之间时，每页显示2张卡片 */
@media (min-width: 768px) and (max-width: 991.98px) {
  .card-wrapper .card {
    flex: 0 0 calc(50% - 0.5rem);
    max-width: calc(50% - 0.5rem);
  }
}

交互优化建议

如果需要支持自动轮播和循环播放，可以在carousel的div标签上添加对应的属性：

• data-bs-ride="carousel"：开启自动轮播
• data-bs-interval="3000"：设置轮播间隔为3秒
• data-bs-wrap="true"：开启循环播放

如果需要添加轮播指示器，可以在carousel-inner后面添加如下结构：

<div class="carousel-indicators">
  <button type="button" data-bs-target="#multiCardCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="第1组"></button>
  <button type="button" data-bs-target="#multiCardCarousel" data-bs-slide-to="1" aria-label="第2组"></button>
</div>

常见问题说明

如果轮播切换时出现卡片闪烁或者布局错乱，通常是因为carousel-item的显示属性没有正确设置，需要确保自定义CSS中carousel-item的display属性为block，同时float属性为none。另外卡片的宽度计算要准确，避免因为宽度超出导致换行，影响每页显示数量。

Bootstrap_5多卡片轮播carousel组件响应式布局前端组件修改时间：2026-07-05 20:57:31