html - Twitter Bootstrap 列填充？

Question

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

我做了 3 个例子的 fiddle :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 设计模式......如果我要说，嵌套网格它不会工作，因为填充占用了空间。

这也会导致我不需要填充的框出现问题( fiddle 上的第 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/

(我修改了背景颜色为红色，这样更容易看出背景和方框的区别)