Question

我试图在容器中显示图像，但是在调整浏览器窗口大小时我遇到了问题：在从6个项目转到4个项目之前，它每行停留6个项目，但现在它们重叠

以下是我所说的：https://www.bootply.com/render/dKyKQWIL9j

图像必须保持固定的尺寸（160x230），并且在顶部/底部应该总是有7个边距，并且在一行中的项目之间应该有一些边距（左边和右边的边缘不是，所以图像在容器中完美地对齐）

这是我的代码：

<div class="container" style="border:1px solid green">
<div class="row">
  <div class="col-6 col-sm-4 col-md-3 col-lg-2" style="margin-top:7px;margin-bottom:7px;border:1px solid red">
    <a href="#" class="d-block mb-6">
      <img class="rounded img-fluid" src="http://via.placeholder.com/160x230.jpg" width="160" height="230">
    </a>
  </div>
  <div class="col-6 col-sm-4 col-md-3 col-lg-2" style="margin-top:7px;margin-bottom:7px;border:1px solid red">
    <a href="#" class="d-block mb-6">
      <img class="rounded img-fluid" src="http://via.placeholder.com/160x230.jpg" width="160" height="230">
    </a>
  </div>
  <div class="col-6 col-sm-4 col-md-3 col-lg-2" style="margin-top:7px;margin-bottom:7px;border:1px solid red">
    <a href="#" class="d-block mb-6">
      <img class="rounded img-fluid" src="http://via.placeholder.com/160x230.jpg" width="160" height="230">
    </a>
  </div>
  <div class="col-6 col-sm-4 col-md-3 col-lg-2" style="margin-top:7px;margin-bottom:7px;border:1px solid red">
    <a href="#" class="d-block mb-6">
      <img class="rounded img-fluid" src="http://via.placeholder.com/160x230.jpg" width="160" height="230">
    </a>
  </div>
  <div class="col-6 col-sm-4 col-md-3 col-lg-2" style="margin-top:7px;margin-bottom:7px;border:1px solid red">
    <a href="#" class="d-block mb-6">
      <img class="rounded img-fluid" src="http://via.placeholder.com/160x230.jpg" width="160" height="230">
    </a>
  </div>
  <div class="col-6 col-sm-4 col-md-3 col-lg-2" style="margin-top:7px;margin-bottom:7px;border:1px solid red">
    <a href="#" class="d-block mb-6">
      <img class="rounded img-fluid" src="http://via.placeholder.com/160x230.jpg" width="160" height="230">
    </a>
  </div>
  <div class="col-6 col-sm-4 col-md-3 col-lg-2" style="margin-top:7px;margin-bottom:7px;border:1px solid red">
    <a href="#" class="d-block mb-6">
      <img class="rounded img-fluid" src="http://via.placeholder.com/160x230.jpg" width="160" height="230">
    </a>
  </div>
  <div class="col-6 col-sm-4 col-md-3 col-lg-2" style="margin-top:7px;margin-bottom:7px;border:1px solid red">
    <a href="#" class="d-block mb-6">
      <img class="rounded img-fluid" src="http://via.placeholder.com/160x230.jpg" width="160" height="230">
    </a>
  </div>
  <!-- etc... -->
</div>
</div>

（固体边框仅供测试）

非常感谢任何帮助。我是css和html的新手，但我尽力阅读他们网格系统的bootstrap文档，但我无法找到col-6 col-sm-4 col-md-3 col-lg-2之间的任何内容来解决我的问题。提前谢谢！

编辑：

在调整浏览器窗口大小时，图像应始终保持相同的分辨率，从连续6个项目到每行2个项目（所以6-5-4-3-2），同时始终尽快填满屏幕因为浏览器大小小于容器。

Answer 1

我看到你正在使用bootstrap版本4，所以请使用col-6而不是col-xs-6用于移动设备。并且对于响应式图像使用img-fluid而不是img-responsive类。感谢

Bootstrap网格中的图像

1 个答案: