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

您需要为图像添加img-responsive类，并将hidden-xs添加到容器div（如果您想隐藏在移动设备中）。平板电脑的隐藏式屏幕，小型桌面的隐藏式屏幕以及大型桌面的隐藏式屏幕：

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

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

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

Answer 3

Just tried this code in my browser and it seems fine. The divs aren't overlapping for me and are being displayed as a normal block element. If you want the images to readjust with the browser window try messing with the width and height settings. Setting them as percentages of the browser window. For the image divs, width: 15%, and give a 5% padding on the left and right sides of the row.

The images may be too large for them all to be displayed on the same line. Try resizing them in an editor.

Bootstrap - 如何在较小的窗口大小上停止图像重叠？

3 个答案: