Создание пробелов между сетками в Twitter Bootstrap

Question

Как я могу создать некоторое пространство между сетками в загрузочном блоке Twitter? Я использую margin или padding, но оба они нажимают последний сетчатый интервал на новую строку и разбивают макет. Вот 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/