Правильная загрузочная сетка?

Question

Что такое правильный способ создания сетки бутстрапа?

Вот пример того, что у меня есть

<div class="row"> 
    <div class="col-md-12"> 
    <div class="page-header"> 
     HELLO 
    </div> 
    </div> 
</div> 

ли мне нужно всегда делать ряд перед тем цв, или я не нужно использовать Col если я создаю новый строку

Или это необходимо сделать так:

1.

<section class="content row"> 
    <div class="col-md-12"> 
      <div class="page-header"> 
       HELLO 
      </div> 
      </div> 

      <div class="col-md-12"> 
      <div class="what"> 
       HELLO 2 
      </div> 
      </div> 
    </section> 

Или это правильный способ сделать это, как этот

2.

<div class="row"> 
    <div class="col-md-12"> 
     <div class="page-header"> 
      HELLO 
     </div> 
    </div> 
</div> 

<div class="row"> 
    <div class="col-md-12"> 
     <div class="page-header"> 
      HELLO 
     </div> 
    </div> 
</div> 

Или мне нужно использовать COL после строки, как это?

3.

<div class="row"> 
     <div class="page-header"> 
      HELLO 
     </div> 
</div> 

<div class="row"> 
     <div class="page-header"> 
      HELLO 
     </div> 
</div> 

Почему я должен использовать ROW и когда? И почему я должен использовать COL и когда?

Это просто пример, если кто-то может ответить мне, что правильно, тогда это будет хорошо?

Answer 1

Сетка работает с 3-х частей: контейнер, строки и столбца (s) ...

Контейнер имеет 15px прокладки. Строка отменяет заполнение контейнера с -15px маржи. Столбцы имеют 15px отступов, которые вытаскивают контент из краев контейнера и создают согласованный 30px желоб.

Цель добавления 15px отступов, которая отрицается только отрицательными границами строк, кажется глупым, но необходимо разрешить встраивание столбцов внутри других столбцов! Обратите внимание на приведенной ниже диаграмме, как вложенные столбцы, обозначенные красным контуром, аккуратно вписываются в охватывающий столбец, не применяя дополнительное дополнение.

Таким образом, чтобы ответить на ваш вопрос, если предположить, что у вас есть .container или .container-fluid обертки вокруг ваших примеров, как 1 и 2 правильно отформатирован. Тем не менее, я бы использовал пример 1, потому что он требует меньше разметки (как правило, это хорошо), и поскольку вы группируете свои элементы в раздел, кажется, что они семантически связаны, поэтому лишняя строка кажется излишней.

Как, @skelly предлагает, я рекомендую взглянуть на раздел Grid в документе. Ниже приведены некоторые из ключевых моментов об использовании строк нашли там:

• Строки должна быть размещена в пределах .container (фиксированная ширина) или .container-жидкости (полная ширина) для правильного выравнивания и заполнения ,
• Используйте строки для создания горизонтальных групп столбцов.
• Содержимое должно быть помещено в столбцы, и только столбцы могут быть непосредственными дочерними элементами строк.

Answer 2

Начнем с примеров в документации Bootstrap: http://getbootstrap.com/css/#grid-example-basic

Из документов ..

• Контент должен быть помещен в col-*, и только col могут быть непосредственными потомками row.
• Строки должны быть размещены в пределах .container для правильного выравнивания и заполнения.
• Это нормально, чтобы колонки составляли более 12 в одной строке. Как говорится в документах.

«Если в одной строке помещено более 12 столбцов, каждая группа дополнительных столбцов будет, как один блок, обернуть на новую строку».

Поэтому, я бы с чем-то ближе всего к вашему # 1, но убедитесь, что она находится в контейнере ..

http://www.bootply.com/Cy2i2H0oZB