Bootstrap Grid系统异常：Swiper轮播幻灯片中3列无法并排

问题概述 #

使用带视差效果的Swiper轮播组件，第一个幻灯片内尝试通过Bootstrap的col-sm-4实现3个等高等宽的并排列，但页面渲染后列全部堆叠，仅显示1列效果。已查阅官方文档及搜索引擎，未找到有效解决方案。

核心原因 #

1. Swiper的视差动画会给带有data-swiper-parallax属性的容器添加绝对定位，破坏了Bootstrap栅格依赖的正常文档流，导致row无法正确排列列元素
2. 若Bootstrap CSS加载顺序晚于Swiper，或Swiper的样式覆盖了Bootstrap栅格的浮动/宽度规则，也会导致布局失效

解决方案 #

方案1：修复视差容器的定位 #

给带有data-swiper-parallax的.text容器添加相对定位，恢复文档流：

<div class="text" data-swiper-parallax="-100" style="position: relative;">

方案2：改用Flex布局替代Bootstrap栅格（更可靠） #

用Bootstrap的d-flex和flex-fill类实现等宽等高列，避免浮动布局被绝对定位干扰：

<div class="container">
  <div class="d-flex">
    <div class="flex-fill p-3">
      <!-- 内容 -->
    </div>
    <div class="flex-fill p-3">
      <!-- 内容 -->
    </div>
    <div class="flex-fill p-3">
      <!-- 内容 -->
    </div>
  </div>
</div>

方案3：强制列的宽度与浮动 #

如果上述方法无效，给col-sm-4添加自定义样式强制布局：

.col-sm-4 {
  float: left !important;
  width: 33.333% !important;
  box-sizing: border-box !important;
}

完整修改后的代码示例 #

<div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" class="swiper mySwiper">
  <div class="parallax-bg" style="background-image: url(https://domain.com/assets/img/moonscape.jpg);" data-swiper-parallax="-23%"></div>
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="title" data-swiper-parallax="-300">Slide 1</div>
      <div class="subtitle" data-swiper-parallax="-200">Subtitle</div>
      <!-- 添加相对定位修复视差容器 -->
      <div class="text" data-swiper-parallax="-100" style="position: relative;">
        <div class="container">
          <!-- 改用flex布局实现等宽列 -->
          <div class="d-flex">
            <div class="flex-fill p-3">
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut libero. Aenean feugiat non eros quis feugiat.
              </p>
            </div>
            <div class="flex-fill p-3">
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut libero. Aenean feugiat non eros quis feugiat.
              </p>
            </div>
            <div class="flex-fill p-3">
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut libero. Aenean feugiat non eros quis feugiat.
              </p>
            </div>
          </div>
        </div>                    
      </div>
    </div>
    <div class="swiper-slide">
      <div class="title" data-swiper-parallax="-300">Slide 2</div>
      <div class="subtitle" data-swiper-parallax="-200">Subtitle</div>
      <div class="text" data-swiper-parallax="-100">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut libero. Aenean feugiat non eros quis feugiat.
        </p>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="title" data-swiper-parallax="-300">Slide 3</div>
      <div class="subtitle" data-swiper-parallax="-200">Subtitle</div>
      <div class="text" data-swiper-parallax="-100">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut libero. Aenean feugiat non eros quis feugiat.
        </p>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="title" data-swiper-parallax="-300">Slide 4</div>
      <div class="subtitle" data-swiper-parallax="-200">Subtitle</div>
      <div class="text" data-swiper-parallax="-100">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut libero. Aenean feugiat non eros quis feugiat.
        </p>
      </div>
    </div>      
  </div>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-pagination"></div>
</div>

额外注意事项 #

• 确保Bootstrap CSS在Swiper CSS之前引入，避免样式优先级冲突
• 若需要等高列，Flex布局的flex-fill会自动让列高度一致，无需额外设置
• 检查Swiper初始化代码是否有修改slide宽度的配置，避免影响内部布局

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