在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，告诉浏览器将所有填充和边距保持在span类定义的宽度内。

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

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