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;
}

Answer 2

尝试

body {
    background-color: green;
}

.container {
    background-color: transparent;
}

Answer 3

试试这个，它的工作对我来说，像这样包装你的代码。

<div class="rowWrp">
    <div class="row colorBg">
        <div class="span6">
            <p>This is a test</p>
        </div>
    </div>
</div>

CSS it：

.colorBg {
   background:red;
  }

.rowWrp {
  background:red; 
  width:940px; 
  padding-right:20px;
  }

这里我假设我们使用固定布局。

Twitter Bootstrap - 全宽背景（图像）

3 个答案: