html - 移除容器侧面

Question

我在设置页面样式时遇到问题，我不确定该怎么做。

我遇到的问题是 Bootstrap 中的容器类在每一侧都有大量填充，但我似乎无法可靠地删除它。我希望红色背景与灰色图像齐平，背景为蓝色。我能够解决这个问题的唯一方法是使用 CSS 属性 background-clip: content-box 但是当我开始添加像 box-shadows 这样的东西时，我开始遇到问题。

这是我现在拥有的:

这就是我想要的:

这是我的代码:

<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 fiddle :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