Twitter-bootstrap: Как правильно использовать класс жидкости?

У меня проблема с пониманием того, как работает класс row-fluid. В соответствии с документацией она настраивается на дизайн жидкости, такой как отзывчивый дизайн. Поэтому, если у него достаточно места, он делает его пригодным для одной строки, иначе он перейдет к следующей строке.

Однако, глядя на этот пример здесь: https://duelify.com/

Как ни странно, первые три заголовка статьи подходят к первой строке. Второй ряд и остальные слегка сдвинуты вправо. Но, глядя на html (ниже), никаких дополнительных классов для этого "побочного эффекта" не требуется.

Почему в одной строке нет заголовков статей. Почему существует случайный промежуток между ними? Есть ли способ заставить их казаться заказанными без каких-либо промежутков между ними?

Ответ 1

В вашем случае правильный код будет выглядеть как

<div class="row-fluid">
   <div class="span4"></div>
   <div class="span4"></div>
   <div class="span4"></div>
</div>
<div class="row-fluid">
   <div class="span4"></div>
   <div class="span4"></div>
   <div class="span4"></div>
</div>

etc...

В каждом классе row-fluid максимальная сумма классов span должна быть до 12. В классах Span осталось поле. Только последний ребенок в одном row-fluid не имеет поля слева.

Посмотрите еще раз на примеры в Twitter Bootstrap documentation. "Для простого расположения двух столбцов создайте .row и добавьте соответствующее количество столбцов .span. Поскольку это сетка с 12 столбцами, каждая .span охватывает несколько из этих 12 столбцов и всегда должна содержать до 12 для каждая строка (или количество столбцов в родительском элементе).

Ответ 2

Здесь происходит несколько вещей. Помните, что по умолчанию общий размер пролетов в строке флюида должен составлять до 12. Здесь здесь немного больше, поэтому, когда css определяет ширину span4 как приблизительно 33%, они фактически превышают 100%, поэтому они собираются на новую линию. Но они не очищаются, поэтому вы заканчиваете с ними цикл и создаете столбцы, как на странице.

Причина, по которой у вас есть пробел слева от второй строки, является то, что bootstrap определяет "желоба", чтобы дать столбцам некоторый запас. Из-за использования лишних столбцов вы их видите. Существует конкретный css для уменьшения желоба в первом интервале строки до 0, следовательно, поэтому на первом нет места.

Последующие "строки" имеют только два столбца, потому что наличие дополнительного желоба отбрасывает математику и делает три span4s более чем на 100% шириной, заставляя их обернуть.

Ответ 3

Следующий код будет работать после контейнера (для адаптивного макета):

<div class="container-fluid">
    <div class="row-fluid">
       <div class="span4"></div> 
    </div>
    <div class="row-fluid">
      <div class="span4"></div>
    </div>
</div>