为什么我的图像行没有跨越整个 col-md-10 宽度？答案

【问题标题】：Why isn't my image row spanning the full col-md-10 width?为什么我的图像行没有跨越整个 col-md-10 宽度？
【发布时间】：2016-11-23 19:03:57
【问题描述】：

我将一行图像设置为 col-md-10，但行没有跨越 col-md-10 的整个宽度。它的左右边缘有一点填充，我不知道它来自哪里。任何人都可以帮忙吗？

The edge of the image should align with the edge of the red container below

HTML

<div class="row">
                <div class="col-md-offset-1 col-md-10 col-sm-offset-2 col-ms-8 col-xs-offset-1 col-xs-10">
                    <!--can be overflow row of assets-->
                    <div class="row screensRow1">
                        <%= image_tag 'Screen1.png', class: 'img-responsive col-md-4 col-sm-6 col-xs-12'%>
                        <%= image_tag 'Screen2.png', class: 'img-responsive col-md-4 col-sm-6 col-xs-12'%>
                        <%= image_tag 'Screen3.png', class: 'img-responsive col-md-4 col-sm-6 col-xs-12'%>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-offset-1 col-md-10 col-sm-offset-2 col-ms-8 col-xs-offset-1 col-xs-10">
                    <!--can be overflow row of assets-->
                    <div class="row screensRow2">
                        <%= image_tag 'Screen4.png', class: 'img-responsive col-md-4 col-sm-6 col-xs-12'%>
                        <%= image_tag 'Screen5.png', class: 'img-responsive col-md-4 col-sm-6 col-xs-12'%>
                        <%= image_tag 'Screen6.png', class: 'img-responsive col-md-4 col-sm-6 col-xs-12'%>
                    </div>
                </div>
            </div>
            </div>

CSS

.screensRow1{
    padding-top: 50px;
    padding-bottom: 0px;
}

.screensRow2{
    padding-top: 25px;
    margin-bottom: 100px;
}

【问题讨论】：

你必须使用boostrap，并且网格系统在bootstrap中有一个填充

标签： css html image row

【解决方案1】：

来自Bootstrap Grid system

行必须放置在 .container（固定宽度）或 .container-fluid（全宽）内，以便正确对齐和填充。

列通过填充创建装订线（列内容之间的间隙）。该填充通过
在第一列和最后一列的行中偏移 .rows 上的负边距。

【讨论】：