删除容器边框

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