图像网格：桌面上为 5 x 5，移动设备上为 3 x 9

Question

我需要在桌面屏幕的 3/4 上制作 5 x 5 的图像网格，但在移动设备时是 3 x 9（最后一行只有 1 个图像）。

所有图像始终为 120x175。

所需的桌面：

所需的移动设备：

我目前有一个 4 x 4 的网格，因为 Bootstrap 使用可被 3 或 4 整除的 col。

但问题是网格不适合移动设备。

当前桌面：

当前手机：

代码：

<div class="row">
  <div class="col-md-1"></div>
  <div class="col-md-7">
    <div class="row">
      <div class="col-md-3 mb-3">
        <img src="https://picsum.photos/100/200">
      </div>
      <div class="col-md-3 mb-3">
        <img src="https://picsum.photos/100/200">
      </div>
      <div class="col-md-3 mb-3">
        <img src="https://picsum.photos/100/200">
      </div>
      <div class="col-md-3 mb-3">
        <img src="https://picsum.photos/100/200">
      </div>
    </div>
    <div class="row">
      <div class="col-md-3 mb-3">
        <img src="https://picsum.photos/100/200">
      </div>
      <div class="col-md-3 mb-3">
        <img src="https://picsum.photos/100/200">
      </div>
      <div class="col-md-3 mb-3">
        <img src="https://picsum.photos/100/200">
      </div>
      <div class="col-md-3 mb-3">
        <img src="https://picsum.photos/100/200">
      </div>
    </div>

  </div>
  <div class="col-md-4">

  </div>
</div>

Answer 1

记住：移动优先。这意味着您的列将始终以 12 个网格开始，除非另有说明。所以如果你只定义md，那么它将从平板电脑和更大的屏幕上获取md配置。

现在对于您的问题，您可以使用偏移量：

<div class="col-sm-4 col-md-2 col-md-offset-1"></div>
<div class="col-sm-4 col-md-2"></div>
<div class="col-sm-4 col-md-2"></div>
<div class="col-sm-4 col-md-2"></div>
<div class="col-sm-4 col-md-2"></div>

另一种方法是不定义任何数字并让它自动填充宽度：

<div class="row">
    <div class="col-sm-4 col-md"></div>
    <div class="col-sm-4 col-md"></div>
    <div class="col-sm-4 col-md"></div>
    <div class="col-sm-4 col-md"></div>
    <div class="col-sm-4 col-md"></div>
  </div>

您似乎有超过 5 个项目，这意味着您必须遍历所有项目并创建一行，每行有 5 个子项。这可能会帮助您实现这一目标：

Loop through an array and divide it