Страницы

Поиск по вопросам

четверг, 29 ноября 2018 г.

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

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

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

№2:
Шапка сайта
Левый блок
Основной блок
Подвал сайта


Ответ

При условии, что вы не указываете для .row и .col отличные от нуля margin и padding (а указывать их, к слову, не следует никогда) - внешне оба варианта будут выглядеть одинаково.
Мало того, в первом варианте вы можете даже не использовать блок .clearfix. Потому что .col-sm-4 и .col-sm-8 и так займут всю ширину экрана, и следующий .col, каким бы он ни был - гарантированно будет перенесен на следующую строку.
Какой из вариантов выбрать - зависит от ситуации.
Первый вариант лучше подходит тогда, когда содержимое сетки строится вами динамически. Например, когда вы можете взять записи из БД, и последовательно, в цикле, выводить их в .col-блоках в верстке. Блоки просто будут переноситься на следующие строки при необходимости. При условии, что блоки одной строки в сумме будут давать 12, и при условии, что высоты содержимого колонов будут одинаковы.
Второй вариант лучше подходит, когда все блоки в сетке заранее вам известны. За счет .row вы ограждаете колонки разных строк друг от друга, читабельность при таком способе - выше.

Комментариев нет:

Отправить комментарий