Twitter bootstrap 在Twitter引导程序中为行添加背景色和填充

我意识到Twitter引导程序中的填充已经做得有些死气沉沉了，我以前也曾在一定程度上实现过，但目前我一直在努力让我的三个

span4

列漂亮地位于填充的白色背景行上

我尝试了各种方法来添加一个额外的、不可靠的

div

，但都没有效果

我试过：

<div id="mydiv">

            <div class="wrap">

                <div class="row">

                    <div class="span4">
                        <ul>
                            <li>Random link</li>
                            <li>Random link</li>
                            <li>Random link</li>
                            <li>Random link</li>
                            <li>Random link</li>
                        </ul>
                    </div> <!-- .span4 -->

                    <div class="span4">
                        <ul>
                            <li>Random link</li>
                            <li>Random link</li>
                            <li>Random link</li>
                            <li>Random link</li>
                            <li>Random link</li>
                        </ul>
                    </div> <!-- .span4 -->

                    <div class="span4">
                        <ul>
                            <li>Random link</li>
                            <li>Random link</li>
                            <li>Random link</li>
                            <li>Random link</li>
                            <li>Random link</li>
                        </ul>
                    </div> <!-- .span4 -->

                </div> <!-- .row -->

            </div> <!-- wrap -->

        </div> <!-- mydiv -->

}

但每次，行要么被下推到下一行，要么根本不环绕内容

我以前曾通过在行后使用非mantic

div

添加填充，但这次似乎不起作用

谁能给我指一下正确的方向吗

---

谢谢。

与其为样式添加一个额外的

div

，不如在行中添加另一个样式，例如，

行填充

，并相应地将新样式传递给它的子行。例如：

CSS ​

HTML

随机链路
随机链路
随机链路
随机链路
随机链路


随机链路
随机链路
随机链路
随机链路
随机链路


随机链路
随机链路
随机链路
随机链路
随机链路

​

---

注意：您可能希望为

.span4.行填充的
宽度定义一个响应显式值（px），而不仅仅是百分比宽度。我只是简单地使用了百分比。
你的问题听起来像是在谈论样式设计——你介意分享你尝试过的CSS吗？例如，类
wrap
在做什么…这不是引导风格。谢谢Merv，现在已经编辑添加了CSS，虽然它基本上是一点填充和背景色。谢谢Merv，我可以看到它在小提琴中起作用，但在我的代码中似乎不起作用，我能问一下“容器”的相关性吗class？@onjegolders
容器
类将样式添加到页面上所有内容的中心（自动边距）。我写的代码并不是以它为条件的，所以我可能不应该包含它。很抱歉，如果你被甩了。嗨，再次感谢梅尔夫，我已经勾选了你的答案，因为我不能和小提琴争论。虽然我的代码肯定有冲突的地方。最后，我在三个跨度周围使用了三个单独的div，所以效果有点不同。@IvanWang，这也应该很好：。请注意，在响应css加载时，每当视口宽度降至768px以下时，偏移量就会归零。如果您在编辑模式下查看JSFIDLE，您可能需要将帧调整得更大，以使效果可见。我不知道如何选择“多类”。这太棒了。谢谢
<div id="mydiv" class="row">

            <div class="wrap">

                    <div class="span4">
                        <ul>
                            <li>Random link</li>
                            <li>Random link</li>
                            <li>Random link</li>
                            <li>Random link</li>
                            <li>Random link</li>
                        </ul>
                    </div> <!-- .span4 -->

                    <div class="span4">
                        <ul>
                            <li>Random link</li>
                            <li>Random link</li>
                            <li>Random link</li>
                            <li>Random link</li>
                            <li>Random link</li>
                        </ul>
                    </div> <!-- .span4 -->

                    <div class="span4">
                        <ul>
                            <li>Random link</li>
                            <li>Random link</li>
                            <li>Random link</li>
                            <li>Random link</li>
                            <li>Random link</li>
                        </ul>
                    </div> <!-- .span4 -->

            </div> <!-- wrap -->

        </div> <!-- mydiv -->

.wrap {
padding: 35px;
background-color: #F7F7F7;
border: 1px solid #DDD;

.row-padded {
  padding: 35px;
  background-color: #F7F7F7;
  border: 1px solid #DDD;
}

.row-padded .span4 {
  background-color: #bbb;
  width: 30%;
}