Question

缩小屏幕时，这些图像相互重叠。我没有对容器流体或行的css进行任何更改。

   <div class="container-fluid bg-grey">
    <div class="row center">
        <div class="col-sm-4">
            <img src="http://www.fpcbp.com/wp-content/gallery/tkGallery/OYIaJ1KK.png" width="425" height="319" />
        </div>
        <div class="col-sm-4">
            <img src="http://www.fpcbp.com/wp-content/gallery/tkGallery/OYIaJ1KK.png" width="425" height="319" />
        </div>
        <div class="col-sm-4">
            <img src="http://www.fpcbp.com/wp-content/gallery/tkGallery/OYIaJ1KK.png" width="425" height="319" />
        </div>
    </div>
   </div>

我希望这些图像只是堆叠在一起，而不是重叠。

由于

Answer 1

列将重叠，因为<img>元素具有固定的width值。 col-*-*具有设定的百分比宽度，一旦小于图像上设置的宽度，就会发生重叠。

要制作图片responsive，您可以移除width属性并使用课程.img-responsive，以便<img>不会超出列的宽度。它使用max-width: 100%。

<img class="img-responsive" src="..." />

Answer 2

您应该为较窄的屏幕定义列，例如COL-XS-12。这意味着在小于768px的屏幕上，每列占用所有可用空间，因此它们会堆叠。

在您的代码中，单行中有3列，单列占可用空间的33.33％。更重要的是，您已经宣布了固定大小的图像。为了使它们具有响应性，您可以使用Bootstrap img-responsive类。但请注意，您必须删除较早的固定高度和宽度。否则图像不会缩放。

Answer 3

如果以上和以下两个有效答案中的任何一个对您不起作用，请尝试将附加您自己的类的css属性添加到图像中：

.myclass{max-width: 100%; height: auto;}

Answer 4

   <div class="container-fluid bg-grey">
    <div class="row center">
        <div class="col-sm-4 col-md-4 col-xs-12">
            <img class="img-responsive" src="http://www.fpcbp.com/wp-content/gallery/tkGallery/OYIaJ1KK.png" width="425" height="319" />
        </div>
        <div class="col-sm-4 col-md-4 col-xs-12">
            <img class="img-responsive" src="http://www.fpcbp.com/wp-content/gallery/tkGallery/OYIaJ1KK.png" width="425" height="319" />
        </div>
        <div class="col-sm-4 col-md-4 col-xs-12">
            <img class="img-responsive" src="http://www.fpcbp.com/wp-content/gallery/tkGallery/OYIaJ1KK.png" width="425" height="319" />
        </div>
    </div>
   </div>

缩小页面

4 个答案: