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

Question

我想使用 bootstrap 12 列网格堆叠四个在桌面大小下彼此相邻的图像，在移动屏幕大小的 2 列（1 和 2
3 和 4）中彼此上方。原始的 4 张图片相似，但大小不完全相同。高度在 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 每第三个元素：

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