Twitter Bootstrap - 全宽背景（图像） [英] Twitter Bootstrap - Full width background (image)

问题描述

我一直在一个项目上，我试着出色的Twitter Bootrtrap，包括响应式网格。

如何给予 .container ）背景颜色？示例：

 < div class =container green> 
< div class =row> 
< div class =span6> 
< p>这是一个测试< / p> 
< / div> 
< / div> 
< div class =row> 
< div class =span6> 
< p>这是一个测试< / p> 
< / div> 
< / div> 
< / div> 
 
 .green {
 background：green; 
} 
  

当我向容器添加颜色时，它会变成绿色，在左侧，约20px。如何实现全角背景？

解决方案

您看到的边距是由于 .row 网格系统的类部分从左移除20px以容纳每行内的 span 类;该类读取如下：

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

您可以绕过 .container

$ b

$

$

b
$ b

 < div class =green> 
< div class =container> 
< div class =row> 
< div class =span6> 
< p>这是一个测试< / p> 
< / div> 
< / div> 
< div class =row> 
< div class =span6> 
< p>这是一个测试< / p> 
< / div> 
< / div> 
< / div> 
< / div> 
  

CSS

  .green {
 background：green; 
} 
  

I'm currenly on a project and I'm trying out the awesome Twitter Bootrtrap including the responsive grid. All works fine and dandy except for one issue.

How do you give the .container (which holds the grid) a background color? Example:

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

When I add a color to the container it will turn green but leaves a margin on the left side, about 20px. How do I implement a full-width background?

解决方案

That margin you're seeing is due to the fact that the .row class part of the grid system removes 20px from the left to accommodate the span classes inside each row; that class reads as follows:

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

You can circumvent that by just wrapping your .container div with another container with the background color of your choice, like so:

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

这篇关于Twitter Bootstrap - 全宽背景（图像）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！