如何在<768px屏幕下将Bootstrap行内卡片转为滑块？

你的思路其实可以优化——不用做两套DOM（既冗余又难维护），直接改造现有卡片结构，通过CSS响应式控制+简单JS就能实现需求。以下是具体实现步骤：

一、调整DOM结构 #

把原有的卡片行嵌套进滑块容器，新增卡片包裹层和切换按钮：

<!-- 滑块容器 -->
<div class="card-slider-container">
  <!-- 卡片包裹层：用来做滑动动画 -->
  <div class="card-wrapper">
    <!-- 你的原有卡片，保留Bootstrap的列类 -->
    <div class="card col-md-4 p-2">
      <img src="card1.jpg" class="card-img-top" alt="Card 1">
      <div class="card-body">
        <h5 class="card-title">卡片1</h5>
        <p class="card-text">卡片内容...</p>
      </div>
    </div>
    <div class="card col-md-4 p-2">
      <img src="card2.jpg" class="card-img-top" alt="Card 2">
      <div class="card-body">
        <h5 class="card-title">卡片2</h5>
        <p class="card-text">卡片内容...</p>
      </div>
    </div>
    <div class="card col-md-4 p-2">
      <img src="card3.jpg" class="card-img-top" alt="Card 3">
      <div class="card-body">
        <h5 class="card-title">卡片3</h5>
        <p class="card-text">卡片内容...</p>
      </div>
    </div>
  </div>
  <!-- 切换按钮 -->
  <button class="slider-btn slider-btn-prev">&lt;</button>
  <button class="slider-btn slider-btn-next">&gt;</button>
</div>

二、添加响应式CSS #

通过媒体查询区分大屏幕和小屏幕的显示逻辑：

/* 大屏幕（≥768px）：保持原有卡片行布局，隐藏切换按钮 */
@media (min-width: 768px) {
  .card-slider-container .slider-btn {
    display: none;
  }
  .card-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }
}

/* 小屏幕（<768px）：转为滑块样式 */
@media (max-width: 767.98px) {
  .card-slider-container {
    position: relative;
    width: 90%;
    margin: 0 auto;
    overflow: hidden;
  }
  .card-wrapper {
    display: flex;
    transition: transform 0.3s ease; /* 滑动动画 */
    gap: 0;
  }
  .card-wrapper .card {
    flex: 0 0 100%; /* 每张卡片占满容器宽度 */
    max-width: 100%;
    margin: 0;
  }
  .slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: rgba(0,0,0,0.5);
    color: #fff;
    padding: 0.5rem 1rem;
    cursor: pointer;
    z-index: 10;
    border-radius: 4px;
  }
  .slider-btn-prev {
    left: 10px;
  }
  .slider-btn-next {
    right: 10px;
  }
  /* 禁用按钮样式 */
  .slider-btn:disabled {
    background: rgba(0,0,0,0.2);
    cursor: not-allowed;
  }
}

三、实现滑动切换逻辑 #

用JS控制卡片的滑动位置，同时处理边界限制：

const cardWrapper = document.querySelector('.card-wrapper');
const prevBtn = document.querySelector('.slider-btn-prev');
const nextBtn = document.querySelector('.slider-btn-next');
const cards = document.querySelectorAll('.card-wrapper .card');
let currentIndex = 0;

// 更新滑块位置和按钮状态
function updateSlider() {
  if (cards.length === 0) return;
  const cardWidth = cards[0].offsetWidth;
  cardWrapper.style.transform = `translateX(-${currentIndex * cardWidth}px)`;
  
  // 边界控制：第一张不能左滑，最后一张不能右滑
  prevBtn.disabled = currentIndex === 0;
  nextBtn.disabled = currentIndex === cards.length - 1;
}

// 左滑事件
prevBtn.addEventListener('click', () => {
  if (currentIndex > 0) {
    currentIndex--;
    updateSlider();
  }
});

// 右滑事件
nextBtn.addEventListener('click', () => {
  if (currentIndex < cards.length - 1) {
    currentIndex++;
    updateSlider();
  }
});

// 窗口 resize 时重新计算滑块状态
window.addEventListener('resize', updateSlider);

// 初始化滑块
updateSlider();

说明 #

• 大屏幕下完全保留你原有的Bootstrap卡片布局，无需额外修改；
• 小屏幕下自动转为单张卡片显示的滑块，带平滑切换动画；
• 按钮会在边界状态下自动禁用，避免无效操作；
• 无需重复制作两套DOM结构，维护成本更低。

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