Правильная сетка на bootstrap

#вёрстка #bootstrap

Вот два варианта одной и той же верстки. Выглядят одинаково но подход к ним разный.
Берут сомнения что какой то из них не правильный. Вопрос: какой из этих вариантов правильный?

№1:









  

    
Шапка сайта
    
Левый блок
    
Основной блок
    

    
Подвал сайта
  





№2:









  

    
Шапка сайта
  
  

    
Левый блок
    
Основной блок
  
  

    
Подвал сайта
  




    

Ответы

Ответ 1

При условии, что вы не указываете для .row и .col отличные от нуля margin и padding
(а указывать их, к слову, не следует никогда) - внешне оба варианта будут выглядеть
одинаково.

Мало того, в первом варианте вы можете даже не использовать блок .clearfix. Потому
что .col-sm-4 и .col-sm-8 и так займут всю ширину экрана, и следующий .col, каким бы
он ни был - гарантированно будет перенесен на следующую строку.

Какой из вариантов выбрать - зависит от ситуации.

Первый вариант лучше подходит тогда, когда содержимое сетки строится вами динамически.
Например, когда вы можете взять записи из БД, и последовательно, в цикле, выводить
их в .col-блоках в верстке. Блоки просто будут переноситься на следующие строки при
необходимости. При условии, что блоки одной строки в сумме будут давать 12, и при условии,
что высоты содержимого колонов будут одинаковы.

Второй вариант лучше подходит, когда все блоки в сетке заранее вам известны. За счет
.row вы ограждаете колонки разных строк друг от друга, читабельность при таком способе
- выше.