如何使用居中文本创建12个相等图像的响应式全行框网格？

Question

我现在被困了几个小时，并试图解决以下问题，并感谢您的建议：

我正在尝试在Bootstrap 3的基础上创建一个完全响应的相等图像（每个400px x 400px）的盒子网格，中心文本。网格应使用100％的屏幕宽度，每个应包含6个图像大屏幕上的行，彼此完美对齐，没有任何白色间隙或填充。在小屏幕上，尺寸应相应缩小，每行应仅包含2张图像。

 +--------------------------------------------------------+
 |                     Fixed Navbar                       |
 |--------------------------------------------------------|
 |                                                        |
 |                        Header                          |
 |                                                        |
 +--------+---------+--------+---------+--------+---------+
 |        |         |        |         |        |         |
 |        |         |        |         |        |         |
 |        |         |        |         |        |         |
 |        |         |        |         |        |         |
 +-------------------------------------------------------->
 |        |         |        |         |        |         |
 |        |         |        |         |        |         |
 |        |         |        |         |        |         |
 |        |         |        |         |        |         |
 +--------v---------v--------v---------v--------v---------+
 |                                                        |
 |                                                        |
 |                        Content                         |
 |                                                        |
 |                                                        |
 +--------------------------------------------------------+

问题是图像突破了100％的自然行宽，如图所示，创建了一个额外的间隙。因此，您必须向右滚动才能看到整个页面，这不是预期的。

HTML：

<div class="row">

    <div class="col-xs-6 col-sm-2 nopadding">
            <div><img src="../img/image1.jpg" class="img-responsive" alt="Responsive image"></div>
    </div>

    <div class="col-xs-6 col-sm-2 nopadding">
            <div><img src="../img/image2.jpg" class="img-responsive" alt="Responsive image"></div>
    </div>

    <div class="col-xs-6 col-sm-2 nopadding">
            <div><img src="../img/image3.jpgg" class="img-responsive" alt="Responsive image"></div>
    </div>

    <div class="col-xs-6 col-sm-2 nopadding">
            <div><img src="../img/image4.jpg" class="img-responsive" alt="Responsive image"></div>
    </div>

    <div class="col-xs-6 col-sm-2 nopadding">
            <div><img src="../img/image5.jpg" class="img-responsive" alt="Responsive image"></div>
    </div>

    <div class="col-xs-6 col-sm-2 nopadding">
            <div><img src="../img/image6.jpg" class="img-responsive" alt="Responsive image"></div>
    </div>

</div>


<div class="row">

<div class="col-xs-6 col-sm-2 nopadding">
            <div><img src="../img/image7.jpg" class="img-responsive" alt="Responsive image"></div>
    </div>

    <div class="col-xs-6 col-sm-2 nopadding">
            <div><img src="../img/image8.jpg" class="img-responsive" alt="Responsive image"></div>
    </div>

    <div class="col-xs-6 col-sm-2 nopadding">
            <div><img src="../img/image9.jpg" class="img-responsive" alt="Responsive image"></div>
    </div>

    <div class="col-xs-6 col-sm-2 nopadding">
            <div><img src="../img/image10.jpg" class="img-responsive" alt="Responsive image"></div>
    </div>

    <div class="col-xs-6 col-sm-2 nopadding">
            <div><img src="../img/image11.jpg" class="img-responsive" alt="Responsive image"></div>
    </div> 

    <div class="col-xs-6 col-sm-2 nopadding">
            <div><img src="../img/image12.jpg" class="img-responsive" alt="Responsive image"></div>
    </div> 

</div>

CSS：

.nopadding {
    padding-left:0;
    padding-right:0;
}

Answer 1

Bootstrap自动为行提供-15px的margin-right和left属性，然后在其列上使用填充来抵消它们。如果要将列上的填充更改为零，请确保删除固有地为行提供的边距。

希望这有帮助！