Question

我有一行图像设置为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;
}

Answer 1

来自Bootstrap Grid system

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

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

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

1 个答案: