Bootstrap 4, 想要slider中的四个item

Question

我想在一张幻灯片中显示四个项目，但在我的情况下它只显示一个

这是我的代码和截图

但在移动端视图中它的工作完美

我的Bootstrap和JavaScriptlink在代码中给出

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

css

div.pic{
  background-color: #353535;
  height: 300px;
  width: 400px;
  color: white;
}

代码

<div class="container-fluid" style="margin-top: 3%;">
  <div id="carouselExample" style="background-color: lightgray" class="carousel slide pointer-event" data-ride="carousel" data-interval="9000">
    <div class="carousel-inner row w-100" role="listbox">
      <div class="carousel-item col-lg-3 col-md-4 col-sm-6 col-12 active" align="center">
        <div class="pic">1</div>
      </div>
      <div class="carousel-item col-lg-3 col-md-4 col-sm-6 col-12" align="center">
        <div class="pic">2</div>
      </div>
      <div class="carousel-item col-lg-3 col-md-4 col-sm-6 col-12" align="center">
        <div class="pic">3</div>
      </div>
      <div class="carousel-item col-lg-3 col-md-4 col-sm-6 col-12" align="center">
        <div class="pic">4</div>
      </div>
    </div>
    <a class="carousel-control-prev text-faded" 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>

截图

Answer 1

您可以通过将 4 个项目放在一个 div 中来解决此问题，如下所示：

<div class="carousel-item col-lg-3 col-md-4 col-sm-6 col-12 active" align="center">
    <table>
        <tr>
            <td><div class="pic">1</div></td>
            <td><div class="pic">2</div></td>
            <td><div class="pic">3</div></td>
            <td><div class="pic">4</div></td>
        </tr>
    </table>
</div>

更多信息：

您基本上所做的就是像往常一样创建 4 张幻灯片。通过将所有 4 个项目添加到主幻灯片中，它会同时显示它们。当然，它需要更多的改进才能好看。

最终编辑

通过将 div 放在 table 中，它会强制项目进入水平位置。

Bootstrap 4, 想要slider中的四个item

Bootstrap 4, want four item in slider

html

responsive-slides

bootstrap-4