如何在桌面上显示一排六列，在移动端显示两排三列？

Question

我有一个包含 6 张图片的部分。我想在桌面上以单行 6 列的形式显示它们，然后在移动设备上以 2 行 3 列的形式显示它们。

我能够在桌面上实现所需的布局。但是在移动设备上，这些图像在单个列中彼此堆叠在一起。我希望它们出现在 2 行中，每行 3 列。

这是标记：

<div class="row">

  <div class="col-sm-4 col-lg-2">
    <img src="" alt="">
  </div>

  <div class="col-sm-4 col-lg-2">
    <img src="" alt="">
  </div>

  <div class="col-sm-4 col-lg-2">
    <img src="" alt="">
  </div>

  <div class="col-sm-4 col-lg-2">
    <img src="" alt="">
  </div>

  <div class="col-sm-4 col-lg-2">
    <img src="" alt="">
  </div>

  <div class="col-sm-4 col-lg-2">
    <img src="" alt="">
  </div>

</div>

Answer 1

从类名中删除“-sm”，因为这针对 ≥576px 的屏幕。 Bootstrap 4 首先是移动设备，因此您只需将“col-4”用于https://getbootstrap.com/docs/4.0/layout/grid/

的文档中所述

<div class="row">

  <div class="col-4 col-lg-2">
    <img src="" alt="">
  </div>

  <div class="col-4 col-lg-2">
    <img src="" alt="">
  </div>

  <div class="col-4 col-lg-2">
    <img src="" alt="">
  </div>

  <div class="col-4 col-lg-2">
    <img src="" alt="">
  </div>

  <div class="col-4 col-lg-2">
    <img src="" alt="">
  </div>

  <div class="col-4 col-lg-2">
    <img src="" alt="">
  </div>

</div>

Answer 2

如果以下是您的 html，请尝试为所需的输出添加给定的 CSS -

CSS 和 HTML-

.row {
  width: 100%;
}

.row img {
  height: 100px;
  width: auto;
}

.col-sm-4 {
  height: 100px;
}

.col-sm-4:nth-child(1) {
  background: #999;
}

.col-sm-4:nth-child(2) {
  background: #888;
}

.col-sm-4:nth-child(3) {
  background: #777;
}

.col-sm-4:nth-child(4) {
  background: #555;
}

.col-sm-4:nth-child(5) {
  background: #333;
}

.col-sm-4:nth-child(6) {
  background: #111;
}

@media only screen and (max-width: 767px) {
  .col-sm-4 {
    float: left;
    width: 33.3%;
  }
}

@media only screen and (min-width: 768px) {
  .col-lg-2 {
    float: left;
    width: 16.6%;
  }
}

<div class="row">

  <div class="col-sm-4 col-lg-2">
    <img src="" alt="">
  </div>

  <div class="col-sm-4 col-lg-2">
    <img src="" alt="">
  </div>

  <div class="col-sm-4 col-lg-2">
    <img src="" alt="">
  </div>

  <div class="col-sm-4 col-lg-2">
    <img src="" alt="">
  </div>

  <div class="col-sm-4 col-lg-2">
    <img src="" alt="">
  </div>

  <div class="col-sm-4 col-lg-2">
    <img src="" alt="">
  </div>

</div>

请调整浏览器窗口大小以查看结果。