Twitter Bootstrap - 全宽背景（图片）答案

【问题标题】：Twitter Bootstrap - Full width background (image)Twitter Bootstrap - 全宽背景（图片）
【发布时间】：2012-04-05 16:53:08
【问题描述】：

我目前正在进行一个项目，我正在尝试很棒的 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;
}

当我向容器添加颜色时，它会变成绿色，但会在左侧留下一个边距，大约 20 像素。如何实现全角背景？

【问题讨论】：

标签： html css background twitter-bootstrap

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

【讨论】：

感谢@Andres 的帮助。该解决方案有效，但这也会导致整个背景跨越内部屏幕，而不仅仅是内部容器。我不能用宽度属性包装颜色 div，因为 .container 是响应式的，因此具有可变宽度..
@Michael 正如另一位贴文所说，您需要为您的案例提供更多信息或在jsfiddle.net 等网站上提供工作演示，以便我们查看并适当回答。

【解决方案2】：

试试

body {
    background-color: green;
}

.container {
    background-color: transparent;
}

【讨论】：

可以，但在我的情况下不是一个选项，这会干扰项目中的其他对象。
根据您提供的代码，我们应该如何知道这一点？如果您有限制，则需要披露。

【解决方案3】：

试试这个，它对我有用，像这样包装你的代码。

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

CSS它：

.colorBg {
   background:red;
  }

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

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

【讨论】：