移动端自定义Bootstrap 5轮播：显示多个非单行项目

我在自定义Bootstrap 5移动端轮播（carousel）布局时遇到问题，希望移动端能显示轮播的所有项目而非仅一个，但调整display、float或max-width等CSS和JS属性后仍未解决，不确定这种需求是否可行，或是找错了调整方向。

目标效果：移动端页面内同时展示所有轮播项目，呈现多列网格/并排布局
当前效果：移动端每次仅显示单个轮播项目，需通过指示器切换查看

基础HTML示例代码 #

<div id="solutions-carousel" class="carousel slide d-block d-md-none">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <a href="#" class="img-link"><img src="./img.png" alt=""></a>
      <a href="#">text</a>
    </div>
    <div class="carousel-item">
      <a href="#" class="img-link"><img src="./img.png" alt=""></a>
      <a href="#">text</a>
    </div>
    <div class="carousel-item active">
      <a href="#" class="img-link"><img src="./img.png" alt=""></a>
      <a href="#">text</a>
    </div>
    <div class="carousel-item active">
      <a href="#" class="img-link"><img src="./img.png" alt=""></a>
      <a href="#">text</a>
    </div>
    <div class="carousel-item active">
      <a href="#" class="img-link"><img src="./img.png" alt=""></a>
      <a href="#">text</a>
    </div>
  </div>
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#solutions-carousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#solutions-carousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#solutions-carousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
    <button type="button" data-bs-target="#solutions-carousel" data-bs-slide-to="3" aria-label="Slide 3"></button>
    <button type="button" data-bs-target="#solutions-carousel" data-bs-slide-to="4" aria-label="Slide 3"></button>
  </div>
</div>

解决思路 #

1. 修正HTML结构错误 #

原代码中多个.carousel-item添加了active类，违背Bootstrap轮播默认规则（仅允许一个active项），先统一移除多余的active类，后续根据需求调整。

2. 覆盖Bootstrap默认轮播CSS #

Bootstrap轮播默认通过绝对定位和opacity控制单项目显示，需重写核心样式实现多项目展示：

@media (max-width: 767px) {
  /* 重置轮播容器布局为网格 */
  #solutions-carousel .carousel-inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 移动端显示2列，可按需调整列数 */
    gap: 1rem;
  }

  /* 重置轮播项样式，强制显示所有项 */
  #solutions-carousel .carousel-item {
    position: static; /* 移除默认绝对定位 */
    opacity: 1;
    display: block;
  }

  /* 若不需要切换功能，隐藏指示器 */
  #solutions-carousel .carousel-indicators {
    display: none;
  }
}

3. 禁用轮播JS切换逻辑 #

如果不需要轮播的切换功能，直接移除carousel类中的slide类，避免Bootstrap JS自动初始化切换：

<div id="solutions-carousel" class="d-block d-md-none">

或通过JS初始化时禁用自动切换：

const solutionsCarousel = new bootstrap.Carousel('#solutions-carousel', {
  interval: false,
  wrap: false
});

4. 可选：保留横向滚动的轮播效果 #

若希望移动端显示部分项目、支持横向滚动查看全部，可调整CSS为：

@media (max-width: 767px) {
  #solutions-carousel .carousel-inner {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  #solutions-carousel .carousel-item {
    position: static;
    opacity: 1;
    flex: 0 0 50%; /* 每次显示2个项目，按需调整宽度占比 */
    scroll-snap-align: start;
  }
}

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