Bootstrap 背景宽度填充

Question

我正在使用 Boostrap 3 并且在看起来太宽的元素上遇到背景问题。容器处于桌面模式 1170 像素，左右填充 15 像素，使内容以 1140 像素的宽度显示。

当我添加具有不同背景颜色的元素时（假设 body + .container 都具有相同的背景），由于填充区域中也显示了背景，因此该元素将显示为 1170px 宽。

我可以为每个屏幕宽度（媒体查询）中具有不同背景的每个元素添加 CSS 来解决问题。但我希望有更好的方法来实现这一点，因为我不能成为唯一遇到这个问题的人。有没有人知道一些 Boostrap 类/函数来解决这个问题，或者知道一些最佳实践？

Answer 1

尝试包装行和/或内部内容，您可以在这里看到我是如何做到的；http://jsfiddle.net/w7wowg94/

HTML

<div id="master-wrap">
    <div class="container">
        <div class="wrap-class-one">
            <div class="row">
                <div class="col-md-6">Content 1</div>
                <div class="col-md-6">Contnent 2</div>
            </div>
        </div>
        <hr />
        <div class="row">
            <div class="col-md-4">
                <div class="inner-wrap">Content 1</div>
            </div>
            <div class="col-md-4">
                <div class="inner-wrap">Contnent 2</div>
            </div>
            <div class="col-md-4">
                <div class="inner-wrap">Contnent 2</div>
            </div>
        </div>
    </div>
</div>

CSS

 #master-wrap {
    margin: 0 auto;
    background-color: #eee;
    padding: 15px;
}
.wrap-class-one {
    background-color: #ccc;
    padding: 15px;
}
.inner-wrap {
    padding: 15px;
    background-color: #ccc;
}