在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類box-sizing:border-box添加box-sizing:border-box ，以告訴瀏覽器將所有填充和邊距保持在span類定義的寬度內。

最后，您在容器內有一個標頭標記，但沒有行/跨度。 如果將其包裝起來，則可能會獲得更一致的渲染。

這是一個小提琴： http : //jsfiddle.net/8RVx6/