Единый столбец полной ширины в строке с сеткой бутстрапа twitter

При использовании загрузочной сетки наилучший способ разметки одного столбца полной ширины в строке?

Вам нужно использовать контейнер и строку для хранения столбца (.container > .row > .col-xs-12 > .actual-content) или вы можете полностью избавиться от строки и столбца и просто использовать контейнер для упаковки (.container > .actual-content)?

Скажем,

<div class="container">
  <div class="row">
    <!-- multiple columns -->
  </div>

  <div class="row">
    <div class="col-xs-12">
      <p>Actual content goes here. It will span the entire width.</p>
    </div>
  </div>

  <div class="row">
    <!-- multiple columns -->
  </div>
</div>

против

<div class="container">
  <div class="row">
    <!-- multiple columns -->
  </div>

  <p>Actual content goes here. It will span the full width.</p>

  <div class="row">
    <!-- multiple columns -->
  </div>
</div>

Один подход считается превосходным над другим? Поскольку столбец охватывает всю ширину для всех размеров носителя, мне не нужны какие-либо гибкие функции. Выданные результаты должны быть одинаковыми, но, возможно, есть тонкие различия, о которых я не знаю. Использование контейнера, строки и столбца кажется излишним...

Ответы

Ответ 1

Одна без строка/сетка в соответствии с собственной документацией Bootstrap. Это правильный способ - не обертывайте его большим количеством классов, что больше разметки для причины "НЕТ".

Я написал об этом пару дней назад: col - * - 12 (col-xs/col-sm/etc) использовать в Bootstrap 3

Документация:

enter image description here

Для элементов полной ширины не требуются классы сетки.

Это правильный способ:

<div class="container">
  <div class="row">
    <!-- multiple columns -->
  </div><!-- closing .row -->

  <p>Actual content goes here. It will span the full width.</p>

  <div class="row">
    <!-- multiple columns -->
  </div><!-- closing .row -->
</div><!-- closing .container -->