html - 在 Bootstrap 响应式设计中堆叠列和图像

Question

我想使用 bootstrap 12 列网格以桌面大小堆叠四个图像，在移动屏幕大小的 2 列(1 和 2
3 和 4)中彼此重叠.原来的4张imgs相似但是大小不完全一样。高度在 40 到 57 像素之间变化，宽度在 176 到 220 像素之间变化。当显示无响应时，它们会以桌面大小的方式出现，彼此相邻。但是，当我通过在 html 中添加 width=100% 使它们响应时，最后一个与其他相比放大，无论是桌面还是移动尺寸，如果我检查，第一个比其他占用更多空间他们。这些图片在手机尺寸中排成两列，但最后一张图片与第三张图片不一致，而是在下面移动了一段。如果我将最后一张图片的尺寸调整为 85%，则尺寸没问题，但图片位置不对的问题仍然存在。

代码如下:

<section id="section">
        <div class = "container">
            <div class = "row">
                <div class="col-md-3 col-sm-3 col-xs-6 col text-center">
                <img src = "img/1.png" style='width:100%;'  alt="Null" />
                </div>

                <div class="col-md-3 col-sm-3 col-xs-6 text-center">
                <img src = "img/2.png" style='width:100%;'  alt="Null" />                    
                </div>

                <div class="col-md-3 col-sm-3 col-xs-6 text-center">
                <img src = "img/3.png" style='width:100%;'  alt="Null" />
                </div>

                <div class="col-md-3 col-sm-3 col-xs-6 text-center">
                <img src = "img/4.png" style='width:100%;' alt="Null" />
                </div>
        </div>
    </div>
</section> 

Answer 1

这取决于对不同高度的元素使用 float。

您有 2 个选项，一个是添加一个由 Bootstrap 提供的特殊 div，它仅在移动断点中可见:

            <div class="col-md-3 col-sm-3 col-xs-6 text-center">
            <img src = "img/2.png" style='width:100%;'  alt="Null" />                    
            </div>


            <div class="clearfix visible-xs"></div>

            <div class="col-md-3 col-sm-3 col-xs-6 text-center">
            <img src = "img/3.png" style='width:100%;'  alt="Null" />
            </div>

            <div class="col-md-3 col-sm-3 col-xs-6 text-center">
            <img src = "img/4.png" style='width:100%;' alt="Null" />
            </div>
    </div>
</div>

您必须在每两个元素之后添加它。

另一种解决方案是仅使用 css 设置自动清除(您必须手动设置正确的媒体查询值)，想法是 clear:left 每 3 个元素:

@media screen and (max-width: 720px) {
    .col-xs-6:nth-of-type(2n+1) {
        clear:left;
    }
}