Какова цель использования нескольких размеров столбцов начальной загрузки?

Я новичок в Bootstrap, и я понимаю, как Bootstrap использует сетку с 12 столбцами. Когда я хочу использовать сетку Bootstrap, я традиционно делаю это так:

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

Я также понимаю, что разные размеры столбцов используются для разных размеров экрана

<div class="row">
    <div class="col-xs-6">
    ...
    </div>
    <div class="col-xs-6">
    ...
    </div>
</div>

Однако, я видел, как многие люди делают что-то похожее на это:

<div class="row">
    <div class="col-xs-6 col-md-6 col-lg-6">
    ...
    </div>
    <div class="col-xs-6 col-md-6 col-lg-6">
    ...
    </div>
</div>

Зачем использовать несколько размеров столбцов? Будет ли браузер определять, какой из них подходит?

Ответы

Ответ 1

В этом примере нет абсолютно никаких причин иметь все три класса:

<div class="row">
    <div class="col-xs-6 col-md-6 col-lg-6">
    ...
    </div>
    <div class="col-xs-6 col-md-6 col-lg-6">
    ...
    </div>
</div>

Это фактически то же самое, что и:

<div class="row">
    <div class="col-xs-6">
    ...
    </div>
    <div class="col-xs-6">
    ...
    </div>
</div>

Сегменты сетки Bootstrap работают на всех размерах выше указанного размера, поэтому применение col-xs-6 приведет к тому, что этот элемент также будет содержать 6 столбцов на любых больших размерах экрана, таких как sm, md и т.д. Я предполагаю, что тот, кто включает все три класса в первом примере не имеют четкого понимания того, как работает сетка Bootstrap.

Вам нужно включить только несколько классов, если вы хотите, чтобы этот элемент был другого размера на разных размерах экрана:

<div class="row">
    <div class="col-xs-4 col-md-3 col-lg-2">
    ...
    </div>
    <div class="col-xs-8 col-md-9 col-lg-10">
    ...
    </div>
</div>

Ответ 2

Несколько размеров col для разных типов экранов:

xs: очень маленькие экраны (телефоны)

sm: экран как для планшетов

md: экран как рабочий стол

lg: Экран для больших рабочих столов

В основном они будут определены в различных media - запросов в bootstrap.css, который помогает браузеру определить, какой из них использовать.

Узнайте больше здесь

добавление

Использование разных классов col упомянутых выше, должно быть в единственной ситуации, когда вы указываете разные размеры столбцов для разных экранов. Например: если вы хотите 12 col в xs, 6 col в sm, 3 col в md и 2 col в lg, то вы можете использовать его как col-xs-12 col-sm-6 col-md-3 col-lg-2 В противном случае, если они будут одинаковыми для всех экранов, вы можете использовать любой сверху, как в col-lg-6. Это скажет браузеру использовать 6 cols независимо от размера экрана.

Ответ 3

Взгляните на эту страницу, чтобы получить представление

http://getbootstrap.com/examples/grid/

В целом Идея использования нескольких классов col заключается в использовании разных значений ширины в зависимости от размера экрана:

Пример:

если u добавить col-md-6 и col-xs-12 в элемент, когда размер экрана близок к точке останова среды, он будет использовать 6 столбцов, но когда размер экрана будет небольшим, он будет использовать всю ширину

Ответ 4

Смешивание точек останова прекрасно работает в Bootstrap 3 (как и в приведенном выше "col-lg-1 col-md-6 col-xs-12"), но не работает в Bootstrap 4.

Был ли он отменен в v4 или есть новое требование синтаксиса?

Спасибо стэн

Ответ 5

Метод обычно используется для размеров экрана. Таким образом, вы не получите 7 столбцов на 7-дюймовом экране. Например; с <div class="col-xs-1 col-md-3 col-lg-6"> вы можете иметь 1 столбец на телефоне, 3 колонки на большом планшете и 6 столбцов на настольном мониторе.