引导背景宽度填充答案

【问题标题】：Bootstrap background width padding引导背景宽度填充
【发布时间】：2015-03-14 21:47:55
【问题描述】：

我正在使用 Boostrap 3，但在出现过宽元素的背景时遇到了问题。容器处于桌面模式 1170 像素，左右具有 15 像素的填充，这使得内容以 1140 像素的宽度显示。

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

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

【问题讨论】：

jsfiddle.net/w7wowg94
@BradHouston - 可能是一个解决方案。尽管我更改 HTML 结构的可能性有限，而且我也认为使用 HTML/div 更改布局是不好的设计。如果可能的话，我更喜欢基于 CSS/类的解决方案。
也许在这里使用 ::after css 元素会有所帮助。 w3schools.com/cssref/sel_after.asp

标签： css twitter-bootstrap background padding

【解决方案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;
}

【讨论】：