Question

我希望使用引导程序12列网格堆叠四个在桌面大小上彼此相邻的图像，在移动屏幕大小的2列（1和2
3和4）中相互叠加。最初的4个imgs是相似的，但大小不完全相同。高度在40到57像素之间变化，宽度在176到220像素之间。当显示无响应时，它们会以桌面大小的方式出现，彼此相邻。然而，当我通过在html中添加width = 100％来使它们响应时，最后一个在桌面和移动大小中与其余部分相比放大了，如果我检查，第一个占用的空间比其余部分多他们。这些照片在移动尺寸的2列中排成一行，但最后一张照片与第三张照片不符，但在下面的段落中移位了。如果我将最后一张图片的大小调整为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设置自动清除（您必须手动设置正确的媒体查询值），并且每3个元素的想法是clear:left：

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

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

1 个答案: