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

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

• Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
• Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via
  negative margin on .rows.