Twitter Bootstrap 列填充？

Question

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

我做了 3 个例子的小提琴：http : //jsfiddle.net/w7zS3/1/

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

    <hr>

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

    <hr>

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

    <hr>

    <div class="row box">
      <div class="col-xs-6">
         header: logo
      </div>
      <div class="col-xs-6">
          header: ad banner
      </div>
    </div>

  </div>

第一个是最有语义的，但添加背景颜色会渗入填充中，从而产生一个“盒子”的错觉。

在那里扔另一个带有背景的 div 效果很好，但文本触及框的边缘，这看起来不太好。

在第三个示例中，我填充了 div，虽然它可以工作，但它在技术上打破了 Twitter Bootstraps 设计模式......如果我要说，嵌套一个网格它不会工作，因为填充占用了空间。

这也会导致我不需要填充的盒子出现问题（小提琴上的第 4 个例子），例如：我在前 6 列中添加了一个标题，在其他 6 列中添加了一个横幅广告......但我想要整个标题部分要采用相同的背景颜色（即.. 网格之间没有空间）...我无法添加填充，因为它会破坏网格并添加背景颜色到填充中，看起来比我的其他部分更宽填充网格。（希望这一点有意义）

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

Answer 1

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

代替

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

查看第二行的变化：http : //jsfiddle.net/w7zS3/3/

（我将背景颜色修改为红色，这样更容易看出背景和方框的区别）