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

Question

如何在 Twitter 引导程序中的网格跨度之间创建一些空间？我正在使用边距或填充，但它们都将最后一个网格跨度推到新行并破坏了布局。这是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告诉浏览器将所有填充和边距保持在跨度类定义的宽度内。

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

这是一个小提琴：http: //jsfiddle.net/8RVx6/