刪除容器邊框

Question

我遇到了問題，並且我不確定要做什麼。

我遇到的問題是Bootstrap中的容器類每邊都有大量的填充，但我似乎無法可靠地將其刪除。我想讓紅色背景與灰色圖像齊平，並在背景中顯示藍色。我能夠解決這個問題的唯一方法是使用CSS屬性background-clip: content-box，但是當我開始添加框陰影之類的東西時，我開始遇到問題。

這就是我現在所擁有的：

這是我想擁有的一切：

這裏是我的代碼：

<div class="container content-color"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <img class="img-responsive" src="http://placehold.it/1140x360"> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-4"> 
      <div class="circle center-block"></div> 
     </div> 
     <div class="col-md-4"> 
      <div class="circle center-block"></div> 
     </div> 
     <div class="col-md-4"> 
      <div class="circle center-block"></div> 
     </div> 
    </div> 
</div> 


.circle { 
    background-color: #48c1b0; 
    height: 150px; 
    width: 150px; 
    border-radius: 50%; 
} 
body { 
    background-color: blue; 
} 
.content-color { 
    background-color: red; 
} 
} 

JS小提琴：http://jsfiddle.net/rxvk0w2n/

Answer 1

col-*有15px上都默認填充，右側和左側。

所以，如果你想刪除的填充，只需在你的CSS使用：

.removePaddingRightLeft { 
    padding-right: 0; 
    padding-left: 0; 
} 

，並將HTML：

<div class="col-md-12 removePaddingRightLeft"> 
    <img class="img-responsive" src="http://placehold.it/1140x360"/> 
</div> 

Updated fiddle