Twitter bootstrap xs视口上的引导栅格中断

我正在尝试在更小和更大的视口上以4x1水平排列4幅图像，在x-small视口上以2x2网格排列

但是，当我调整到xs时，第三个图像向右浮动

我试着去掉我添加的所有其他类，并更改图片，但没有效果

<div class="row margin-100-top margin-100-bot">
        <div class="col-sm-3 col-xs-6 margin-10-eql">
            <img src="/wp-content/themes/canvas-child/images/nw_csr_volunteering.jpg" alt="">
        </div>
        <div class="col-sm-3 col-xs-6 margin-10-eql">
            <img src="/wp-content/themes/canvas-child/images/nw_manchester_volunteering.jpg" alt="">
        </div>

        <div class="col-sm-3 col-xs-6 margin-10-eql">
            <img src="/wp-content/themes/canvas-child/images/nw_manchester_volunteers.jpg" alt="">
        </div>
        <div class="col-sm-3 col-xs-6 margin-10-eql">
            <img src="/wp-content/themes/canvas-child/images/nw_leeds_volunteering.jpg" alt="">
        </div>
    </div>

我的保证金等级仅增加上述保证金，仅供参考

非常感谢你的帮助

---

Ben

我也遇到了类似的问题，结果表明，原因是不同立柱的高度略有不同。这似乎也是您的情况，因为nw_manchester_autonovating.jpg比其他图像短1像素

希望这有帮助：-D

在课堂上。如果你删除左边的填充物，容器液体：15px；或右边填充：15px；属性，然后图像按预期对齐

或者，您可以删除左填充：15px，右键：15px；从嵌套在.container fluid中的类容器中，或为网站的此部分创建一个新类，该部分将保留填充：0px；或右边填充：0px；如下图所示：

<div class="container-fluid purple-back">
    <div class="container" style="padding-right:0px;">
        <div class="row margin-100-top margin-100-bot">
            <div class="col-sm-3 col-xs-6 margin-10-eql">
                <img src="/wp-content/themes/canvas-child/images/nw_csr_volunteering.jpg" alt="corporate volunteers in Liverpool">
            </div>
            <div class="col-sm-3 col-xs-6 margin-10-eql">
                <img src="/wp-content/themes/canvas-child/images/nw_manchester_volunteering.jpg" alt="corporate volunteers in Manchester">
            </div>

            <div class="col-sm-3 col-xs-6 margin-10-eql">
                <img src="/wp-content/themes/canvas-child/images/nw_manchester_volunteers.jpg" alt="corporate volunteers in Sheffield">
            </div>
            <div class="col-sm-3 col-xs-6 margin-10-eql">
                <img src="/wp-content/themes/canvas-child/images/nw_leeds_volunteering.jpg" alt="Corporate Volunteers in Leeds">
            </div>

            <div class="row">
                <div class="col-xs-12 col-xs-offset-0">
                    <h1 class="white margin-30-top text-center big">Benefacto helps people organise and run meaningful
                        employee volunteering programmes in Manchester, Leeds, Liverpool and Sheffield.</h1>
                </div>
            </div>
        </div>
    </div>
</div>

---

另一个解决方案是遵循Pol Del Aguila的答案，并对所有图片使用相同的尺寸。

yaylitzis的答案的另一个替代方法是从图像一中删除底部边距，如下所示：

<div class="row margin-100-top margin-100-bot">
    <div class="col-sm-3 col-xs-6" style="margin-top:10px">
        <img src="/wp-content/themes/canvas-child/images/nw_csr_volunteering.jpg" alt="corporate volunteers in Liverpool">
    </div>
    <div class="col-sm-3 col-xs-6 margin-10-eql">
        <img src="/wp-content/themes/canvas-child/images/nw_manchester_volunteering.jpg" alt="corporate volunteers in Manchester">
    </div>

    <div class="col-sm-3 col-xs-6 margin-10-eql">
        <img src="/wp-content/themes/canvas-child/images/nw_manchester_volunteers.jpg" alt="corporate volunteers in Sheffield">
    </div>
    <div class="col-sm-3 col-xs-6 margin-10-eql">
        <img src="/wp-content/themes/canvas-child/images/nw_leeds_volunteering.jpg" alt="Corporate Volunteers in Leeds">
    </div>

    <div class="row">

        <div class="col-xs-12 col-xs-offset-0">
            <h1 class="white margin-30-top text-center big">Benefacto helps people organise and run meaningful
                 employee volunteering programmes in Manchester, Leeds, Liverpool and Sheffield.</h1>
        </div>

    </div>
</div>

---

我觉得这样更好的原因是你没有弄乱整个容器，从而影响里面的一切。而是用单个元素来解决问题。

这是因为4 x 6不等于12。网格中的所有列总和必须达到12。感谢您的回复。我很清楚4x6不等于12；我要寻找的是在xs屏幕端口上，我将有一行两个col-xs-6块，然后在下面的一行上有下两个块。这有问题吗？