Question

我使用的是Boostrap 3，并且对于看起来太宽的元素有背景问题。容器处于桌面模式1170px并且左右填充15px，这使得内容的宽度为1140px。

当我添加一个具有不同背景颜色的元素时（让我们说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;
}

Bootstrap背景宽度填充

1 个答案: