如何在Bootstrap Carousel中按屏幕尺寸设置每行卡片数量

问题背景 #

当前使用Bootstrap Carousel时，设置col-md-3会固定显示4张卡片，但需要实现：

• 移动端（xs）：每行1张
• 中等屏幕（md）：每行2张
• 大屏及超大屏（lg）：每行3张
  直接修改col-lg-4未生效，核心原因是JS中固定了每页显示数量，且响应式列类设置不完整。

解决方案 #

1. 调整HTML中carousel-item的列类 #

给每个.carousel-item添加完整的响应式栅格类，覆盖所有断点：

<div class="carousel-item col-12 col-md-6 col-lg-4 active">

• col-12：xs屏幕占满整行，每行1张
• col-md-6：md屏幕占半行，每行2张
• col-lg-4：lg及以上屏幕占1/3行，每行3张

2. 修改JS逻辑，动态适配不同屏幕的显示数量 #

原JS中itemsPerSlide固定为4，需要改为根据当前屏幕宽度动态计算，同时调整滑动时的补位逻辑：

// 获取当前屏幕对应的每页显示数量
function getItemsPerSlide() {
  if ($(window).width() >= 992) { // lg断点
    return 3;
  } else if ($(window).width() >= 768) { // md断点
    return 2;
  } else { // xs断点
    return 1;
  }
}

$('#carouselExample').on('slide.bs.carousel', function (e) {
  var $e = $(e.relatedTarget);
  var idx = $e.index();
  var itemsPerSlide = getItemsPerSlide();
  var totalItems = $('.carousel-item').length;
  
  if (idx >= totalItems - (itemsPerSlide - 1)) {
    var it = itemsPerSlide - (totalItems - idx);
    for (var i=0; i<it; i++) {
      if (e.direction=="left") {
        $('.carousel-item').eq(i).appendTo('.carousel-inner');
      } else {
        $('.carousel-item').eq(0).appendTo('.carousel-inner');
      }
    }
  }
});

// 窗口 resize 时重新初始化carousel，避免显示异常
$(window).resize(function() {
  $('#carouselExample').carousel('dispose').carousel({ interval: false });
});

$('#carouselExample').carousel({ 
  interval: false,
});

$(document).ready(function() {
  $('a.thumb').click(function(event){
    event.preventDefault();
    var content = $('.modal-body');
    content.empty();
    var title = $(this).attr("title");
    $('.modal-title').html(title);        
    content.html($(this).html());
    $(".modal-profile").modal({show:true});
  });
});

3. 补充CSS（可选，优化显示） #

如果卡片间距有问题，可添加少量CSS调整：

.carousel-inner .carousel-item {
  padding: 0 5px; /* 调整卡片左右间距 */
}

修改后的完整代码 #

HTML #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <link rel="stylesheet" href="./ashik.css">
    <style>
        .carousel-inner .carousel-item {
            padding: 0 5px;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="9000">
            <div class="carousel-inner row w-100 mx-auto" role="listbox">
                <div class="carousel-item col-12 col-md-6 col-lg-4 active">
                   <div class="panel panel-default">
                      <div class="panel-thumbnail">
                        <a href="#" title="image 1" class="thumb">
                          <img class="img-fluid mx-auto d-block" src="//via.placeholder.com/600x400?text=1" alt="slide 1">
                        </a>
                      </div>
                    </div>
                </div>
                <div class="carousel-item col-12 col-md-6 col-lg-4">
                   <div class="panel panel-default">
                      <div class="panel-thumbnail">
                        <a href="#" title="image 3" class="thumb">
                         <img class="img-fluid mx-auto d-block" src="//via.placeholder.com/600x400?text=2" alt="slide 2">
                        </a>
                      </div>
                    </div>
                </div>
                <div class="carousel-item col-12 col-md-6 col-lg-4">
                   <div class="panel panel-default">
                      <div class="panel-thumbnail">
                        <a href="#" title="image 4" class="thumb">
                         <img class="img-fluid mx-auto d-block" src="//via.placeholder.com/600x400?text=3" alt="slide 3">
                        </a>
                      </div>
                    </div>
                </div>
                <div class="carousel-item col-12 col-md-6 col-lg-4">
                    <div class="panel panel-default">
                      <div class="panel-thumbnail">
                        <a href="#" title="image 5" class="thumb">
                         <img class="img-fluid mx-auto d-block" src="//via.placeholder.com/600x400?text=4" alt="slide 4">
                        </a>
                      </div>
                    </div>
                </div>
                <div class="carousel-item col-12 col-md-6 col-lg-4">
                  <div class="panel panel-default">
                      <div class="panel-thumbnail">
                        <a href="#" title="image 6" class="thumb">
                          <img class="img-fluid mx-auto d-block" src="//via.placeholder.com/600x400?text=5" alt="slide 5">
                        </a>
                      </div>
                    </div>
                </div>
                <div class="carousel-item col-12 col-md-6 col-lg-4">
                   <div class="panel panel-default">
                      <div class="panel-thumbnail">
                        <a href="#" title="image 7" class="thumb">
                          <img class="img-fluid mx-auto d-block" src="//via.placeholder.com/600x400?text=6" alt="slide 6">
                        </a>
                      </div>
                    </div>
                </div>
                <div class="carousel-item col-12 col-md-6 col-lg-4">
                   <div class="panel panel-default">
                      <div class="panel-thumbnail">
                        <a href="#" title="image 8" class="thumb">
                          <img class="img-fluid mx-auto d-block" src="//via.placeholder.com/600x400?text=7" alt="slide 7">
                        </a>
                      </div>
                    </div>
                </div>
                 <div class="carousel-item col-12 col-md-6 col-lg-4">
                    <div class="panel panel-default">
                      <div class="panel-thumbnail">
                        <a href="#" title="image 2" class="thumb">
                         <img class="img-fluid mx-auto d-block" src="//via.placeholder.com/600x400?text=8" alt="slide 8">
                        </a>
                      </div>
                    </div>
                </div>
            </div>
            <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next text-faded" href="#carouselExample" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
<script src="./ashik.js"></script>
</body>
</html>

JS #

// 获取当前屏幕对应的每页显示数量
function getItemsPerSlide() {
  if ($(window).width() >= 992) { // lg断点
    return 3;
  } else if ($(window).width() >= 768) { // md断点
    return 2;
  } else { // xs断点
    return 1;
  }
}

$('#carouselExample').on('slide.bs.carousel', function (e) {
  var $e = $(e.relatedTarget);
  var idx = $e.index();
  var itemsPerSlide = getItemsPerSlide();
  var totalItems = $('.carousel-item').length;
  
  if (idx >= totalItems - (itemsPerSlide - 1)) {
    var it = itemsPerSlide - (totalItems - idx);
    for (var i=0; i<it; i++) {
      if (e.direction=="left") {
        $('.carousel-item').eq(i).appendTo('.carousel-inner');
      } else {
        $('.carousel-item').eq(0).appendTo('.carousel-inner');
      }
    }
  }
});

// 窗口 resize 时重新初始化carousel，避免显示异常
$(window).resize(function() {
  $('#carouselExample').carousel('dispose').carousel({ interval: false });
});

$('#carouselExample').carousel({ 
  interval: false,
});

$(document).ready(function() {
  $('a.thumb').click(function(event){
    event.preventDefault();
    var content = $('.modal-body');
    content.empty();
    var title = $(this).attr("title");
    $('.modal-title').html(title);        
    content.html($(this).html());
    $(".modal-profile").modal({show:true});
  });
});

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