Question

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

我做了三个例子的小提琴：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/

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

Twitter Bootstrap列填充？

1 个答案: