javascript - 在 Twitter Bootstrap 中的网格跨度之间创建空间

Question

如何在 Twitter Bootstrap 中的网格跨度之间创建一些空间？我正在使用边距或填充，但它们都将最后一个网格跨度推到一个新行并破坏了布局。这是 jsfiddle:

http://jsfiddle.net/jUQEc/1/

还有一些标记:

<div class="container-narrow">

      <h4 class="title">Featured Companies</h4>

      <div class="row-fluid" id="posts">
        <div class="span6 post">
          <h4 class="title">Company Details</h4>
          <div class="box">
            test
          </div>
        </div>
        <div class="span3 post">
          <h4 class="title">Company News</h4>
          <div class="box">
            test<br>test<br>testtest<br>test<br>testtest<br>test<br>testtest<br>test<br>test
          </div>
        </div>
        <div class="span3 post">
          <h4 class="title">Company News</h4>
          <div class="box">
            test<br>test<br>testtest<br>test<br>testtest<br>test<br>testtest<br>test<br>test
          </div>
        </div>

        <div class="span4 post">
          <h4 class="title">Company News</h4>
          <div class="box">
            test<br>test<br>test
          </div>
        </div>

      </div>

    </div>

Answer 1

两件事:

您需要将container-fluid 类添加到容器中。当您放入屏幕时，这将使左/右页边距保持不变。

将 box-sizing:border-box 添加到 .box 类，以告知浏览器将所有填充和边距保持在 span 类定义的宽度内。

最后，您在容器内有一个 header 标签，但不在行/跨度中。如果你把它包起来，你可能会得到更一致的渲染。

这是一个 fiddle :http://jsfiddle.net/8RVx6/