删除容器边

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小提琴：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