Bootstrap 4: лучше ли использовать «.row» или «.col-12» для нового блока? Почему?

Question

Я собираюсь показать небольшой пример.

<div class="container">
  <div class="row">

    <form class="col-12 form-group">
      // some code
    </form>

    <div class="col-12">
      // some text for description
    </div>

  </div>
</div>

Как видите, эти столбцы находятся в одной строке, но я могу их разделить. Вот так:

<div class="container">

  <div class="row">
    <form class="col-12 form-group">
      // some code
    </form>
  </div>

  <div class="row">
    <div class="col-12">
      // some text for description
    </div>
  </div>

</div>

Будет ли разница?

Answer 1

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

Тривиальное:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
  <div class="row flex-column-reverse">

    <form class="col-12 form-group">
      one
    </form>

    <div class="col-12">
      two
    </div>

  </div>
</div>

<div class="container">

  <div class="row flex-column-reverse">
    <form class="col-12 form-group">
      one
    </form>
  </div>

  <div class="row flex-column-reverse">
    <div class="col-12">
      two
    </div>
  </div>

</div>

Вы не можете использовать flex-column-reverse во втором случае, чтобы изменить порядок.