CSS-为网格中的某些列添加背景

好的，我是CSS新手，这给我带来了麻烦。如何向多个列（而不是所有列）添加背景色

我想在span2上使用一种背景色，在span10上使用另一种颜色。我遇到的问题是填充问题。当我将背景应用于某些列时，它在内容周围不会有很好的填充。这有意义吗？如何为某些嵌套列添加背景，同时保持良好的填充效果

HTML 解释 因此，

bg

类正在应用背景。然后，我的嵌套列有奇怪的填充，因此我仔细检查并添加了类，如

right pad

到需要右填充的列，以及

bot pad

到底部需要填充的列。我知道这在语义上是多么的错误，我只是不知道如何得到我需要的结果。谢谢

这是我试图做的另一个例子。。。然而，它们也不能提供解决方案

---

在

span#

级别上设置

背景色不是一个好主意。为什么？因为
span#
是一个定位辅助工具，如果您更改填充或边距，整个网格将中断

那么，呈现彩色背景包装的本机Twitter引导元素是什么？很好

如何使用它

首先，将

井

元素插入

span#

中：

---

通过这种方式，您始终可以使用父类

。井

，但您可以随意应用不同的属性。

如何跨多个跨度添加井？我让它只在一个跨度上工作，但我需要为多个嵌套列添加背景。遵守嵌套顺序：行>span12>井>行流体>span6（x2）。看到了吗：如果我们有嵌套的行，并且我们需要一个井中的特定行呢？只需遵守嵌套顺序：行>行>行>井>行>行。。。它应该会起作用。

<div class="row bg">
  <div class="span10"> 

        <!-- Main hero unit for a primary marketing message or call to action -->
        <div class="sidebar">
            <div class="hero-unit">
                <h1>Join</h1>
                <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
                <p><a class="btn btn-primary btn-large">Register Now &raquo;</a></p>
            </div>
        </div>

        <!-- Example row of columns -->
        <div class="row">
            <div class="span5">
                <div class="bot-pad">
                    <h2>We are Fun!</h2>
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
                    <p><a class="btn" href="#">View details &raquo;</a></p>
                </div>
            </div>
            <div class="span5">
                <div class="right-pad bot-pad">
                    <h2>Learn more about yourself</h2>
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
                    <p><a class="btn" href="#">View details &raquo;</a></p>
                </div>
            </div>
        </div>
    </div>
</div>

.bg
{
    background: url('/assets/img/grid.png');
    .border-radius(5px); //LESS mixin for creating border radius
}
.right-pad
{
    padding-right: 20px;
}

.bot-pad
{
    padding-bottom: 20px;
}

<div class="span5">
    <div class="well well-red">
        <!-- Your content -->
    </div>
</div>

.well-red {
    background-color: #ff0000;
}