响应式Bootstrap Carousel小屏轮播项堆叠 单条展示问题求助

问题根因 #

你当前的轮播采用「单轮播项（.item）内嵌4张卡片」的结构，仅适配大屏多卡片并列展示的场景。小屏尺寸下你给每个卡片设置了col-sm-12属性，导致同个轮播项内的4张卡片纵向堆叠，单次轮播会展示一整堆内容，同时缺少非活跃轮播项强制隐藏的样式，才会出现内容堆叠在原有内容下方的问题。

修复方案 #

方案1：全尺寸统一单次滑动1张卡片（适配你要求的小屏单张展示需求） #

直接调整轮播HTML结构，把所有卡片拆分到独立轮播项内，每个轮播项仅放1张卡片：

<div class="carousel slide media-carousel" id="media">
  <div class="carousel-inner">
    <!-- 每个卡片单独占一个item，共12个item -->
    <div class="item active">
      <div class="row">
        <div class="col-md-12">
          <a class="thumbnail" href="#"><img alt="" src="~/images/user.jpg"></a>
        </div>
      </div>
    </div>
    <div class="item">
      <div class="row">
        <div class="col-md-12">
          <a class="thumbnail" href="#"><img alt="" src="~/images/user.jpg"></a>
        </div>
      </div>
    </div>
    <!-- 剩余10个成员卡片按上述结构依次添加 -->
  </div>
  <a data-slide="prev" href="#media" class="left carousel-control">‹</a>
  <a data-slide="next" href="#media" class="right carousel-control">›</a>
</div>

在现有CSS末尾添加适配代码：

/* 解决小屏内容溢出、堆叠问题 */
.media-carousel .carousel-inner {
  overflow: hidden;
}
.media-carousel img {
  width: 100%;
  height: auto;
  max-width: 250px;
  margin: 0 auto;
}

方案2：保留大屏单次滑动4张、小屏单次滑动1张的自适应效果 #

添加JS逻辑根据屏幕宽度动态调整轮播结构，同时补充媒体查询样式：

$(function() {
  // 缓存原始轮播结构，避免resize反复操作丢失节点
  const originCarouselHtml = $('#media .carousel-inner').html();
  function adjustCarouselLayout() {
    const isSmallScreen = $(window).width() < 768;
    $('#media .carousel-inner').html(originCarouselHtml);
    if (isSmallScreen) {
      // 小屏拆分所有卡片为独立轮播项
      const allCards = $('#media .carousel-inner .col-md-3');
      let newHtml = '';
      allCards.each(function() {
        newHtml += `<div class="item"><div class="row"><div class="col-sm-12">${$(this).html()}</div></div></div>`;
      });
      $('#media .carousel-inner').html(newHtml).find('.item:first').addClass('active');
    }
    // 重置轮播
    $('#media').carousel('pause').carousel(0);
  }
  adjustCarouselLayout();
  $(window).on('resize', adjustCarouselLayout);
});

@media (max-width:767px) {
  .media-carousel .item {
    height: auto;
  }
  .media-carousel img {
    width: 100% !important;
    height: auto !important;
  }
}

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