Question

我试图在视口小和大的地方（4x1）和x小视口上的2x2网格中排列4幅图像。

但是，当我调整为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>

https://dev.benefacto.org/north/

（我的保证金类只增加保证金，fyi）

非常感谢你的帮助，

本

Answer 1

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>

我发现这个更好的原因是你不会弄乱整个容器，从而影响到里面的一切。相反，您正在解决您使用单个元素所遇到的问题。

Answer 2

我遇到了类似的问题，原因是不同列的原因（非常）略有不同。这似乎也是你的情况，因为nw_manchester_volunteering.jpg正好比其他图像短1个像素。

希望这会有所帮助:-D

Answer 3

在课程$menu-width: 200px;中，如果您删除.container-fluid或padding-left:15px;属性，则图片会按照您的预期对齐。

或者，您可以删除嵌套在padding-right:15px;中的padding-left:15px;类padding-right:15px;中的container，也可以为网站的此部分创建新类您将拥有.container-fluid或padding-left:0px;，如下所示：

padding-right: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>的答案，并为所有照片使用相同的尺寸。

xs视口上的Bootstrap网格中断

3 个答案: