爲什麼我的圖像行不能跨越整個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上的負邊距，該填充在第一行和最後一列的行中被抵消。