带滑块的4栅格行引导

Question

我有6张照片和md大小，我想有一个滑块显示他们全部，在lg，他们都是并排显示，在sm上，他们显示1每行，所以没有问题。基本上，我是说，我不想有2行在md，但1与滑块。现在的情况如下

​

但是我想让它看起来像这个

​

​

，这条蓝线应该是一个滑块，可以滑动显示更多的照片。

这是我现在使用的代码

        <div class="row align-items-center text-center">
            <div class="col-md-3 col-lg-2 col-sm-12 mt-3">
                <a href="#" id="">
                    <img src="./assets/GAMES/fortnite.jpg" alt="" class="rounded">
                </a>
            </div>
            <div class="col-md-3 col-lg-2 col-sm-12 mt-3">
                <a href="#" class="">
                    <img src="./assets/GAMES/gta5.jpg" alt="" class="rounded">
                </a>
            </div>
            <div class="col-md-3 col-lg-2 col-sm-12 mt-3">
                <a href="#" class="">
                    <img src="./assets/GAMES/leagueoflegends.jpg" alt="" class="rounded">
                </a>
            </div>
            <div class="col-md-3 col-lg-2 col-sm-12 mt-3">
                <a href="#" class="">
                    <img src="./assets/GAMES/mobile legends.jpg" alt="" class="rounded">
                </a>
            </div>
            <div class="col-md-3 col-lg-2 col-sm-12 mt-3">
                <a href="#" class="">
                    <img src="./assets/GAMES/minecraft.jpg" alt="" class="rounded">
                </a>
            </div>
            <div class="col-md-3 col-lg-2 col-sm-12 mt-3">
                <a href="#" class="">
                    <img src="./assets/GAMES/rust.jpg" alt="" class="rounded">
                </a>
            </div>
        </div>

做得到吗？我要学什么才能做到？任何链接都将不胜感激。

Answer 1

您可以使用媒体查询为相应的屏幕宽度设置flex-wrap和overflow。我已经将最小宽度设置为768 as，最大宽度设置为991.98px。您可以相应地更改它。请运行输出的代码段。

​

@media (min-width: 768px) and (max-width: 991.98px) {
  .row {
    flex-wrap: nowrap !important;
    overflow: auto !important;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/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.0/js/bootstrap.min.js"></script>

<div class="row align-items-center text-center">
  <div class="col-md-3 col-lg-2 col-sm-12 mt-3">
    <a href="#" id="">
      <!-- <img src="./assets/GAMES/fortnite.jpg" alt="" class="rounded"> -->
      <img src="https://picsum.photos/200/200" alt="" class="rounded">
    </a>
  </div>
  <div class="col-md-3 col-lg-2 col-sm-12 mt-3">
    <a href="#" class="">
      <!-- <img src="./assets/GAMES/gta5.jpg" alt="" class="rounded"> -->
      <img src="https://picsum.photos/200/200" alt="" class="rounded">
    </a>
  </div>
  <div class="col-md-3 col-lg-2 col-sm-12 mt-3">
    <a href="#" class="">
      <!-- <img src="./assets/GAMES/leagueoflegends.jpg" alt="" class="rounded"> -->
      <img src="https://picsum.photos/200/200" alt="" class="rounded">
    </a>
  </div>
  <div class="col-md-3 col-lg-2 col-sm-12 mt-3">
    <a href="#" class="">
      <!-- <img src="./assets/GAMES/mobile legends.jpg" alt="" class="rounded"> -->
      <img src="https://picsum.photos/200/200" alt="" class="rounded">
    </a>
  </div>
  <div class="col-md-3 col-lg-2 col-sm-12 mt-3">
    <a href="#" class="">
      <!-- <img src="./assets/GAMES/minecraft.jpg" alt="" class="rounded"> -->
      <img src="https://picsum.photos/200/200" alt="" class="rounded">
    </a>
  </div>
  <div class="col-md-3 col-lg-2 col-sm-12 mt-3">
    <a href="#" class="">
      <!-- <img src="./assets/GAMES/rust.jpg" alt="" class="rounded"> -->
      <img src="https://picsum.photos/200/200" alt="" class="rounded">
    </a>
  </div>
</div>

​

Answer 2

您可以使用js动态地为4张卡中的每一张创建一个corousel项(幻灯片)，并使用引导4的corousel显示滑动行。

科鲁塞尔

Answer 3

而不是安装一个滑块来移动图像，我们实际上可以创建一个旋转木马的效果与引导。它将为用户提供令人叹为观止的体验。这是它的密码。

PS:根据您的要求编辑类名和ID名。

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" 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" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>