Bootstrap Grid中的图像[重复]

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 有点陌生，但我尽力阅读了他们网格系统的引导文档，但我在 col-6 col-sm-4 col-md-3 col-lg-2 之间找不到任何东西来解决我的问题。提前致谢！

编辑：

在调整浏览器窗口大小时，图像应始终保持相同的分辨率，并且从一行中的 6 个项目减少到每行 2 个项目（即 6-5-4-3-2），同时始终尽快填满屏幕因为浏览器尺寸比容器小。

Answer 1

我看到您使用的是引导程序版本 4，因此请在移动设备上使用 col-6 而不是 col-xs-6。并且对于响应式图像，使用 img-fluid 而不是 img-responsive 类。谢谢