如何调整Bootstrap多行列轮播每屏元素数量以适配不同视口宽度

推荐优先用CSS实现布局逻辑，如果你需要全量展示所有logo且适配窗口动态调整分页，再加少量JS即可，两种方案都比纯JS实现布局更简便。

方案1：纯CSS实现（最快实现布局要求） #

直接修改你的SCSS代码即可，用CSS Grid替代原来的Flex布局，可以精准控制行列数，不需要修改现有HTML结构：

#current-clients-wrapper {
  background-color: white;

  .carousel-item {
    padding: 0;
    margin: 0 auto;
    height: 100%;
  }
  .carousel-size {
    max-width: 750px;
    margin: 0 auto;
  }
  .client-logos {
    display: grid;
    column-gap: 20px;
    row-gap: 30px;
    /* 大屏>576px时默认5列2行，刚好放10张图 */
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(2, auto);
    div {
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        max-width: 100%;
        height: auto;
      }
    }
  }
}

@media (max-width: 575.98px) {
  #current-clients-wrapper {
    .carousel-size {
      max-width: 90%;
    }
    .client-logos {
      /* 小屏<576px时2列2行，刚好放4张图 */
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(2, auto);
    }
    /* 隐藏小屏下每页多余的logo，避免溢出 */
    .client-logos div:nth-child(n+5) {
      display: none;
    }
  }
}

如果不需要展示多余logo，这个方案就可以直接满足需求。

方案2：CSS+轻量JS实现（全量展示所有logo，动态适配分页） #

如果你需要小屏下也能轮播展示全部20个logo，只需要调整一下HTML结构加少量JS即可：

修改HTML.SLIM代码 #

把所有logo统一渲染，不要预先拆分到轮播项里：

#current-clients-wrapper
  .container
    .wrapper
      h1 Customers using Slidesync

      div[class="carousel slide carousel-size" data-ride="carousel"]
        div[class="carousel-inner" role="listbox" id="client-carousel-inner"]
          - # 统一渲染所有logo，默认隐藏
          - %w[BASF DeutscheBahn DeutscheBundesBank eon Eurowings NTT p7s1 Pfizer SWISS thyssenkrupp Airbus EQS-Group Habegger HugoBoss KION Linde-Group MediaBroadcast Swissport Uniper zf].each do |item|
            div[class="client-logo-item d-none"]
              img[src=asset_path("customers/#{item}.jpg") alt=""]

新增JS代码 #

页面加载和窗口缩放时自动按当前视口要求拆分轮播项：

function renderClientCarousel() {
  const perPage = window.innerWidth < 576 ? 4 : 10;
  const innerContainer = document.getElementById('client-carousel-inner');
  const allLogos = Array.from(document.querySelectorAll('.client-logo-item'));
  // 清空原有轮播项
  innerContainer.innerHTML = '';

  // 按每页数量拆分生成轮播项
  for (let i = 0; i < allLogos.length; i += perPage) {
    const pageLogos = allLogos.slice(i, i + perPage);
    const carouselItem = document.createElement('div');
    carouselItem.className = `carousel-item item ${i === 0 ? 'active' : ''}`;
    const logosWrapper = document.createElement('div');
    logosWrapper.className = 'client-logos d-block w-100';
    
    pageLogos.forEach(logo => {
      const logoClone = logo.cloneNode(true);
      logoClone.classList.remove('d-none');
      logosWrapper.appendChild(logoClone);
    });

    carouselItem.appendChild(logosWrapper);
    innerContainer.appendChild(carouselItem);
  }

  // 重新初始化Bootstrap轮播
  $('.carousel-size').carousel('dispose').carousel();
}

// 页面加载和窗口大小变化时触发重绘
window.addEventListener('load', renderClientCarousel);
window.addEventListener('resize', renderClientCarousel);

共用SCSS代码 #

和方案1的SCSS代码一致即可。

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