如何实现Bootstrap 5多轮播项的响应式布局

问题分析 #

要实现Bootstrap 5轮播组件，桌面/笔记本设备上每张幻灯片显示3个并排卡片，768px及以下小屏设备仅显示1个卡片，但当前卡片堆叠而非并排，核心原因是Bootstrap默认轮播的.carousel-item占100%宽度，需通过CSS调整布局实现多元素并排。

修改后的代码 #

HTML 部分 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<div class="row">
  <div class="col-1 d-flex align-items-center">
    <button class="carousel-control-prev w-100" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>
  </div>

  <div class="col-10">
    <div id="carouselExampleControls" class="carousel slide" data-interval="false" data-bs-ride="carousel">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <div class="card h-100">
            <input type="radio" id="prod1" checked>
            <label for="prod1">
              <img src="/images/products/" style="width:82px;margin:6px;padding:6px;" alt="Product 1">
            </label>
          </div>
        </div>

        <div class="carousel-item">
          <div class="card h-100">
            <input type="radio" id="prod2">
            <label for="prod2">
              <img src="/images/products/" style="width:82px;margin:6px;padding:6px;" alt="Product 2">
            </label>
          </div>
        </div>

        <div class="carousel-item">
          <div class="card h-100">
            <input type="radio" id="prod3">
            <label for="prod3">
              <img src="/images/products/" style="width:82px;margin:6px;padding:6px;" alt="Product 3">
            </label>
          </div>
        </div>

        <div class="carousel-item">
          <div class="card h-100">
            <input type="radio" id="prod4">
            <label for="prod4">
              <img src="/images/products/" style="width:82px;margin:6px;padding:6px;" alt="Product 4">
            </label>
          </div>
        </div>

        <div class="carousel-item">
          <div class="card h-100">
            <input type="radio" id="prod5">
            <label for="prod5">
              <img src="/images/products/" style="width:82px;margin:6px;padding:6px;" alt="Product 5">
            </label>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="col-1 d-flex align-items-center">
    <button class="carousel-control-next w-100" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>
</div>

CSS 部分 #

/* 桌面端显示3个卡片 */
@media (min-width: 768px) {
  .carousel-inner {
    display: flex;
  }
  .carousel-item {
    flex: 0 0 33.3333%;
    margin-right: 0;
    display: block;
  }
}

/* 小屏设备显示1个卡片 */
@media (max-width: 767px) {
  .carousel-item {
    flex: 0 0 100%;
  }
  .card {
    width: 100% !important;
  }
}

/* 卡片及单选框样式 */
.card input[type=radio] {
    display:none;
}
.card input[type=radio] + label:hover {
  cursor:pointer;
  border:1px solid royalblue !important;
}
.card input[type=radio] + label {
    font-size:14px;
    text-align:center;
    display:inline-block;
    margin:6px;
    border:1px solid var(--accordion-border2) !important;
    border-radius:4px;
    vertical-align:top;
    padding:6px;
    width: calc(100% - 12px);
}
.card input[type=radio]:checked + label { 
  background-image: none;
  border:2px solid royalblue !important;
  opacity:0.9;
}

.carousel-control-next, .carousel-control-prev{
  background-color:black !important;
}

JavaScript 部分 #

var carouselExampleControls = document.querySelector('#carouselExampleControls')
var carousel = new bootstrap.Carousel(carouselExampleControls, {
  interval: 0,
  wrap: false
});

关键修改点 #

• 桌面端布局调整：给.carousel-inner添加display: flex，设置.carousel-item宽度为33.333%，实现3个卡片并排显示。
• 小屏适配：小屏时让.carousel-item占100%宽度，确保单卡片独占一行。
• 卡片元素优化：设置标签宽度为calc(100% - 12px)，避免卡片内元素溢出，同时保持边距。
• 控制按钮对齐：给控制按钮的父容器添加d-flex align-items-center，确保按钮垂直居中，提升视觉一致性。

内容的提问来源于stack exchange，提问作者Bboi1999