Bootstrap - 如何阻止图像在较小的窗口尺寸上重叠？

Question

我有这个：

<div id="members">
    <div class="container-fluid">
        <div class="row">
            <div id="members" class="col-md-12 text-center">
                <h3>Text</h3>
                <div class="col-lg-2 col-md-2">
                <img src="images/1.png">
                </div>
                <div class="col-md-2">
                <img src="images/1.png">
                </div>
                <div class="col-md-2">
                <img src="images/1.png">
                </div>
                <div class="col-md-2">
                <img src="images/1.png">
                </div>
                <div class="col-md-2">
                <img src="images/1.png">
                </div>
                <div class="col-md-2">
                <img src="images/1.png">
                </div>
         </div>
      </div>
    </div>
</div>

但是，当我使浏览器窗口变窄时，它们开始重叠。我该如何控制这个？以及如何删除较小浏览器窗口中的一些图像？

谢谢

Answer 1

刚刚在我的浏览器中尝试了这段代码，看起来还不错。对我来说，div 没有重叠，而是显示为普通的块元素。如果您希望使用浏览器窗口重新调整图像，请尝试弄乱宽度和高度设置。将它们设置为浏览器窗口的百分比。 对于图像 div，宽度：15%，并在行的左侧和右侧提供 5% 的填充。

图像可能太大而无法全部显示在同一行。尝试在编辑器中调整它们的大小。

Answer 2

您需要将 img-responsive 类添加到图像，并将 hidden-xs 添加到容器 div（以防您想隐藏在移动设备中）。 hidden-sm 用于平板电脑， hidden-md 用于小型桌面， hidden-lg 用于大型桌面：

<div class="col-md-2 hidden-xs">
   <img src="http://via.placeholder.com/350x150/880000" class="img-responsive">
</div>

笔：https://codepen.io/giannidk/pen/rwpmpx?editors=1100

Answer 3

Bootstrap 4 使用 .img-fluid 类来处理响应式图像， from the docs

<img src="images/1.png" class="img-fluid" />