html - 图像网格：桌面上为 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>

标签： htmlcss

Answer 1

Remember: Mobile first. Meaning that your columns will always start to 12 grids until told otherwise. So if you only define md, then it will get the md configuration from tablet and bigger screens.

Now for your problem, you could use the offsets:

<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>

Another way to do it, is to just not define any number and let it automatically fill the width:

<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>

It seems that you have more than 5 items meaning that you will have to iterate through them all and create a row with 5 children on each row. This might help you to achieve that:

Loop through an array and divide it