Html 推特引导列填充？

是否可以在不破坏网格的情况下填充Twitter引导列？我正在构建一个以“盒子”为中心的设计

我列举了三个例子：

内容。。。
内容。。。
内容。。。

内容。。。
内容。。。
内容。。。

内容。。。
内容。。。
内容。。。

标题：标志
标题：广告横幅

第一种是最具语义的，但添加背景色会在填充物中产生一个“盒子”的错觉

在那里抛出另一个有背景的div效果很好，但是文本碰到了框的边缘，看起来不太好

在第三个例子中，我填充了div，虽然它可以工作，但在技术上打破了Twitter引导设计模式。。。如果我说，嵌套一个网格，它将无法工作，因为填充占据了空间

这也会在我不需要填充的框上产生问题（小提琴上的第四个示例），例如：我在前6列中添加标题，在其他6列中添加横幅广告。。但我希望整个标题部分的背景颜色相同（即网格之间没有空格）。。。我不能添加填充物，因为它会破坏网格，添加背景颜色会渗入填充物，看起来比其他填充网格更宽。（希望这一点有意义）

---

有没有正确的方法来解决这个问题？

我通常使用列中的列来提供类似于填充的效果

而不是

<div class="col-xs-4">
    <div class="box">content...</div>
</div>

内容。。。

试试这个：

<div class="col-xs-4">
    <div class="box row">
        <div class="col-xs-1"></div>
        <div class="col-xs-10">content</div>
        <div class="col-xs-1"></div>
    </div>
</div>

内容

请参见第二行中的更改：

---

（我将背景颜色修改为红色，以便更容易看到背景和框之间的差异）

我通常在列中使用嵌套的行/列，而不使用填充。我认为这是最好的选择。它实现了您想要的效果，同时保持在Bootstrap的文档化用法规则范围内：列和行。另一方面，请参阅Erik Flowers的优秀文章，以了解有关网格系统的更多信息。谢谢，我从未想过这样做，我会尝试一下：）。

<div class="col-xs-4">
    <div class="box row">
        <div class="col-xs-1"></div>
        <div class="col-xs-10">content</div>
        <div class="col-xs-1"></div>
    </div>
</div>