在 Twitter Bootstrap 中创建网格跨度之间的空间答案

【问题标题】：Create spaces between grid spans in Twitter Bootstrap在 Twitter Bootstrap 中创建网格跨度之间的空间
【发布时间】：2013-06-25 09:04:51
【问题描述】：

如何在 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>

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

两件事：

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

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

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

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

【讨论】：