在Twitter引导程序中创建网格跨度之间的空间

Create spaces between grid spans in Twitter Bootstrap

本文关键字：之间 空间 网格 Twitter 引导程序 创建      更新时间：2023-09-26

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

两件事：

您需要将container-fluid类添加到容器中。当你把屏幕放进去时，这将保持左/右页边距。

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

最后，您在容器中有一个header标记，但不在一行/span中。如果将其包裹起来，可能会得到更一致的渲染。

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

相关文章：