Лучшая практика для одиночного столбца в строке в системной системе bootstrap v3?

Я читал о сетке здесь: http://getbootstrap.com/css/#grid. Хотя документация напрямую не описывает сценарий, в котором есть один столбец внутри строки, я вижу один пример этого здесь: http://getbootstrap.com/css/#grid-offsetting > третья строка пример кода.

В настоящее время я применяю класс .col-xs-12 к одному столбцу внутри содержащихся тегов и хорошо работает во всех размерах видовых экранов. Тем не менее, я хочу, чтобы не было лучшего способа сделать это.

Спасибо!

Ответы

Ответ 1

Я думаю, что добавление col * -12 будет лучшей практикой. Это сделает все строки в вашей сетке одинаковыми.

Пример:

enter image description here

HTML

<div class="container">
            <div class="row" style="background-color:yellow;">
                <div class="col-xs-12" style="background-color:aqua;">col-xs-12 inside a row</div>
            </div>
</div>                      
<div class="container">
            <div class="row" style="background-color:yellow;">
                direct inside a row
            </div>
</div>      
<div class="container">
            <div class="row" style="background-color:yellow;">
                <div class="col-xs-6" style="background-color:red;">col-xs-6 inside a row</div>
                <div class="col-xs-6" style="background-color:orange;">col-xs-6 inside a row</div>
            </div>
</div>

Как вы видите, содержимое НЕ соответствует другим строкам, когда вы не добавляете col - * - 12 (из-за отсутствия заполнения). Все строки одинаково облегчат будущие изменения.

Вы должны заметить, что столбцы col * -12 отличаются от других столбцов, потому что у них нет поплавка влево, см. https://github.com/twbs/bootstrap/issues/10152

Ответ 2

Хорошо, если у вас есть только один элемент и вы хотите, чтобы он использовал всю ширину контейнера (1170px), вам, вероятно, вообще не нужен .row/.col-xs-12.

Смотрите Example, проверьте исходный код самой страницы.

Обратите внимание, что содержимое сверху не использует строки/столбцы?

  <div class="container">

  ...

  <h3>Three equal columns</h3>
  <p>Get three equal-width columns <strong>starting at desktops and scaling to large desktops</strong>. On mobile devices, tablets and below, the columns will automatically stack.</p>

В этом случае строка /cols не будет делать ничего, кроме добавления отрицательного поля (строки) и заполнения (col).

Кроме того, пример, который вы указываете, использует offsetting и не является полной шириной, поэтому требуется строка/col.

Ответ 3

Я знаю это немного позже, но ответы выше не рассматривали классы смещения сетки

Вы можете центрировать столбец с чем-то вроде этого:

<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>