为什么我的图像行不能跨越整个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

• 行必须放置在.container（固定宽度）或.container-fluid（全宽度）内，以便正确对齐和填充。
• 列通过填充创建装订线（列内容之间的间隙）。通过
  .rows上的负边距，该填充在第一行和最后一列的行中被抵消。