5

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

№1:

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-sm-12" style="border:1px solid black;">Шапка сайта</div>
    <div class="col-sm-4" style="border:1px solid black;">Левый блок</div>
    <div class="col-sm-8" style="border:1px solid black;">Основной блок</div>
    <div class="clearfix"></div>
    <div class="col-sm-12" style="border:1px solid black;">Подвал сайта</div>
  </div>
</div>

№2:

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-sm-12" style="border:1px solid black;">Шапка сайта</div>
  </div>
  <div class="row">
    <div class="col-sm-4" style="border:1px solid black;">Левый блок</div>
    <div class="col-sm-8" style="border:1px solid black;">Основной блок</div>
  </div>
  <div class="row">
    <div class="col-sm-12" style="border:1px solid black;">Подвал сайта</div>
  </div>
</div>

12
  • Визуально второй проще воспринимать и меньше шансов запутаться 4 окт 2016 в 10:12
  • Я могу ошибаться, но как правило подход к таким проблемам сугубо утилитарный, то есть что удобнее использовать для нужного эффекта то и используется. И чисто визуально и интуитивно я бы использовал вариант два так как он более читабельный 4 окт 2016 в 10:12
  • я так же рассуждаю. но довольно авторитетный сайт первый вариант считает правильным. второй это мой. вот и сомневаюсь
    – perfect
    4 окт 2016 в 10:16
  • а что на авторитетном сайте приводится в качестве аргумента? мне например вообще в любых условиях претит использовать конструкции типа <div class="clearfix"></div> 4 окт 2016 в 10:20
  • 1
    @perfect, да, оказывается разметка тоже код. В голове всё равно мысль что код это нечто исполняемое. На вашем месте я усомнился бы в авторитетности ресурса, который вы указали и посмотрел бы как делают тут - getbootstrap.com/css/#grid-options 4 окт 2016 в 10:43

1 ответ 1

3

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

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

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

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

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

1
  • 3
    clearfix нужен не только для принудительного переноса, но и чтобы разные по высоте колонки не цеплялись друг за друга. Блок в 12 колонок никакими выступами не задержать, он сам себе clearfix. А блок на 8 (или меньше) колонок может зацепиться. 17 окт 2016 в 20:49

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.