在移动设备上自定义 Bootstrap 5 轮播（多个项目，但不在一行）-PHP中文网问答

我在尝试自定义移动设备上的轮播布局时遇到问题。我希望它在移动设备上显示轮播的每一项，而不是只显示一项，但在尝试使用一些 CSS 和 JS 之后，尤其是使用 display float 或max-witdh 我刚刚开始认为这是不可能的，或者我不知道在哪里查看/查看错误的位置/属性。我加入了两张图片，这样你们就可以看到我想要实现的目标。

我想要实现的目标：

我有什么：

示例 html 代码是非常基本的代码，我不包括 CSS，因为这只是出于设计目的。

<div id="solutions-carousel" class="carousel slide d-block d-md-none">
<div class="carousel-inner">
<div class="carousel-item active">
  <a href="#" class="img-link"><img src="./img.png" alt=""></a>
  <a href="#">text</a>
</div>
<div class="carousel-item">
  <a href="#" class="img-link"><img src="./img.png" alt=""></a>
  <a href="#">text</a>
</div>
<div class="carousel-item active">
  <a href="#" class="img-link"><img src="./img.png" alt=""></a>
  <a href="#">text</a>
</div>
<div class="carousel-item active">
  <a href="#" class="img-link"><img src="./img.png" alt=""></a>
  <a href="#">text</a>
</div>
<div class="carousel-item active">
  <a href="#" class="img-link"><img src="./img.png" alt=""></a>
  <a href="#">text</a>
</div>
<div class="carousel-indicators">
  <button type="button" data-bs-target="#solutions-carousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
  <button type="button" data-bs-target="#solutions-carousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
  <button type="button" data-bs-target="#solutions-carousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
  <button type="button" data-bs-target="#solutions-carousel" data-bs-slide-to="3" aria-label="Slide 3"></button>
  <button type="button" data-bs-target="#solutions-carousel" data-bs-slide-to="4" aria-label="Slide 3"></button>
 </div>

有什么想法吗？干杯（并对糟糕的英语表示歉意）。

$('.multi-item-carousel').carousel({ interval: false }); // for every slide in carousel, copy the next slide's item in the slide. // Do the same for the next, next item. $('.multi-item-carousel .item').each(function(){ var next = $(this).next(); if (!next.length) { next = $(this).siblings(':first'); } next.children(':first-child').clone().appendTo($(this)); if (next.next().length>0) { next.next().children(':first-child').clone().appendTo($(this)); } else { $(this).siblings(':first').children(':first-child').clone().appendTo($(this)); } });