Twitter Bootstrap - 全宽背景(图像)

Question

我现在正在进行一个项目,我正在尝试包括响应式网格在内的很棒的Twitter Bootrtrap.除了一个问题,一切都很好,花花公子.

你如何给.container(保持网格)一个背景颜色？例:

<div class="container green">
    <div class="row">
        <div class="span6">
            <p>This is a test</p>
        </div>
    </div>
    <div class="row">
        <div class="span6">
            <p>This is a test</p>
        </div>
    </div>
</div>

.green{
 background:green;
}

当我向容器添加颜色时,它将变为绿色,但在左侧留下一个边距,大约20px.如何实现全角背景？

Answer 1

你看到的那个边缘是由于.row网格系统的类部分从左边移除20px以容纳span每行内的类; 该课程内容如下:

.row {
    margin-left: -20px;
}

您可以通过.container使用您选择的背景颜色的另一个容器包装div 来避开这种情况,如下所示:

HTML

<div class="green">
    <div class="container">
        <div class="row">
            <div class="span6">
                <p>This is a test</p>
            </div>
        </div>
        <div class="row">
            <div class="span6">
                <p>This is a test</p>
            </div>
        </div>
    </div>
</div>

CSS

.green{
    background:green;
}