Bootstrap Grid中的图像[重复]

Posted 2023-03-05

【中文标题】Bootstrap Grid中的图像[重复]

【英文标题】：Images in Bootstrap Grid [duplicate]

【发布时间】：2018-07-31 18:25:33

【问题描述】：

我正在尝试在容器中显示图像，但在调整浏览器窗口大小时遇到​​问题：在从 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"  >
    </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"  >
    </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"  >
    </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"  >
    </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"  >
    </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"  >
    </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"  >
    </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"  >
    </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），同时始终尽快填满屏幕因为浏览器尺寸比容器小。

【问题讨论】：

but i did my best reading the bootstrap documentation of their grid system 您需要阅读新文档而不是旧文档...您在使用 Bootstrap 4 时使用的是 Bootstrap 3 中的类

【参考方案1】：

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

【讨论】：

谢谢，这解决了最小分辨率问题中仅有的 1 个项目，但是您是否知道在将每行 6 到 4 个项目之前也解决了它们重叠的问题？

是的，如果您在图像上使用 img-fluid 而不是 img-responsive 并在小屏幕中使用 col-3 4 列和 col-2 6 列。

我将我的代码（也在 OP 中）更新为 col-6 col-sm-4 col-md-3 col-lg-2 并将其更改为 img-fluid，但行为仍然相同：/

我现在没有在这段代码中发现任何重叠。能否请您显示确切问题的屏幕截图。

没关系，它确实有效。我现在只是有另一个问题，现在已经解决了。我的图像有不同的尺寸，我使用 width 和 height 属性将它们设置为固定尺寸，但现在使用 img-fluid 我的宽度和高度设置被推翻，有什么解决办法吗？