如何用Bootstrap 5实现适配不同视口的卡片轮播功能

完全可以仅通过原生Bootstrap 5的内置能力实现需求，无需引入第三方轮播组件，适配桌面端一次展示3张卡片、移动端一次展示1张卡片的要求，完美兼容Webpack+SCSS的开发环境。

实现原理 #

核心是结合Bootstrap原生轮播组件的滑动逻辑、内置响应式栅格系统，加上极少量的自定义SCSS调整滚动行为，不需要修改Bootstrap核心源码，兼容性和后续可维护性都有保障。

具体实现步骤 #

• 基础结构搭建
  使用Bootstrap原生carousel组件作为容器，所有卡片直接放在轮播的carousel-inner容器内即可。
• 响应式布局适配
  给卡片外层的列容器添加Bootstrap内置响应式类col-md-4 col-12，即可自动实现≥768px桌面视口下一行展示3张卡片，<768px移动端视口下一行展示1张卡片的基础布局；卡片统一添加h-100类实现等高，避免滑动时高度跳动。
• 自定义滚动行为（SCSS代码）
  仅需添加少量SCSS调整轮播的滚动宽度，直接复用Bootstrap内置的断点变量即可，代码可以写入你项目的自定义SCSS文件中：

  @media (min-width: $md) {
    .carousel .carousel-inner {
      display: flex;
    }
    .carousel .carousel-item {
      display: block;
      margin-right: 0;
      // 桌面端每个轮播项占1/3宽度，实现一次滚动1张、同时展示3张的效果
      flex: 0 0 calc(100% / 3);
    }
  }
  

• 轮播JS初始化
  直接引入Bootstrap内置的Carousel模块初始化即可，支持触摸滑动、自动轮播等原生能力：

  import { Carousel } from 'bootstrap'
  
  const cardCarousel = new Carousel('#你的轮播容器ID', {
    interval: 3000, // 自动轮播间隔，不需要自动轮播可设为false
    wrap: true, // 循环滚动
    touch: true // 开启移动端触摸滑动
  })
  

额外优化提示 #

如果需要调整不同断点下的卡片展示数量，只需要修改对应断点下的flex属性占比即可，比如平板断点下可以设置展示2张卡片，仅需要额外添加对应断点的SCSS规则即可，不需要修改其他逻辑。

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