В чем разница между col-lg- *, col-md- * и col-sm- * в Bootstrap?

Загрузочный docs объясняет это, но мне все же понадобилось некоторое время, чтобы получить его. Это имеет смысл, когда я объясняю это себе одним из двух способов:

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

Например, если вы начинаете с столбцов: A B C

Вы решаете, когда они должны складываться так:

А

В

С

Если вы выберете col-lg, то столбцы будут стекаться, когда ширина равна < 1200px.

Если вы выберете col-md, тогда столбцы будут стекаться, когда ширина равна < 992px.

Если вы выберете col-sm, то столбцы будут стекаться, когда ширина равна < 768px.

Если вы выберете col-xs, столбцы никогда не будут стекаться.

С другой стороны, если вы думаете о столбцах, начинающихся с укладки, то вы можете выбрать, в какой точке они станут горизонтальными.:

Если вы выберете col-sm, то столбцы станут горизонтальными, если ширина равна = 768px.

Если вы выберете col-md, столбцы станут горизонтальными, если ширина равнa >= 992px.

Если вы выберете col-lg, столбцы станут горизонтальными, если ширинa >= 1200px.

От Twitter Загрузочная документация:

• маленькая сетка (≥ 768px) = .col-sm-*,
• средняя сетка (≥ 992px) = .col-md-*,
• большая сетка (≥ 1200px) = .col-lg-*.

Я думаю, что запутанный аспект этого заключается в том, что BootStrap 3 - это мобильная система с высокой чувствительностью и не может объяснить, как это влияет на иерархию col-xx-n в той части документации Bootstrap. Это заставляет вас задаться вопросом, что происходит на более мелких устройствах, если вы выберете значение для более крупных устройств и заинтересуетесь, нужно ли указывать несколько значений. (Вы этого не делаете)

Я попытался бы разъяснить это, заявив, что... Более низкие типы зерен (xs, sm) пытаются сохранить внешний вид макета на меньших экранах, а более крупные типы (md, lg) будут отображаться корректно только на больших экранах, но будут обертывать столбцы на более мелкие устройства. Значения, приведенные в предыдущих примерах, относятся к порогу, в котором загрузочный диск ухудшает внешний вид, чтобы соответствовать доступному состоянию экрана.

На практике это означает, что если вы создадите столбцы col-xs-n, то они сохранят правильный внешний вид даже на очень маленьких экранах, пока окно не упадет до размера, который настолько ограничительный, что страница не может быть отображена правильно, Это должно означать, что устройства с шириной 768 пикселей или менее должны показывать вашу таблицу, как вы ее разрабатывали, а не в деградированной (одинарной или упакованной форме столбца). Очевидно, что это все еще зависит от содержания столбцов и от того, что весь смысл. Если страница пытается отобразить несколько столбцов больших данных, бок о бок на маленьком экране, то столбцы будут естественно обернуться ужасно, если вы не учтете это. Поэтому, в зависимости от данных в столбцах, вы можете определить точку, в которой макет будет использоваться для адекватного отображения контента.

например. Если ваша страница содержит три столбца столбцов col-sm-n, они будут помещать столбцы в строки, когда ширина страницы падает ниже 992 пикселей. Это означает, что данные все еще видны, но для просмотра требуется вертикальная прокрутка. Если вы не хотите, чтобы ваш макет деградировал, выберите xs (пока ваши данные могут быть адекватно отображены на устройстве с более низким разрешением в трех столбцах)

Если горизонтальное положение данных важно, вы должны попытаться выбрать более низкие значения гранулярности, чтобы сохранить визуальный характер. Если позиция менее важна, но страница должна быть видимой на всех устройствах, следует использовать более высокое значение.

Если вы выберете col-lg-n, столбцы будут отображаться правильно, пока ширина экрана не упадет ниже порога xs 1200px.

Размеры устройства и префикс класса:

• Дополнительные мелкие устройства Телефоны (< 768px) - .col-xs-
• Маленькие устройства Таблетки (≥768px) - .col-sm-
• Средние устройства Настольные компьютеры (≥992px) - .col-md-
• Крупные устройства Настольные компьютеры (≥1200px) - .col-lg-

Параметры сетки:

Ссылка: Grid System

.col-xs-$   Extra Small     Phones Less than 768px 
.col-sm-$   Small Devices   Tablets 768px and Up 
.col-md-$   Medium Devices  Desktops 992px and Up 
.col-lg-$   Large Devices   Large Desktops 1200px and Up 

TL; DR

.col-XY означает размер экрана X и выше, растяните этот элемент, чтобы заполнить Y столбцов.

Bootstrap предоставляет сетку из 12 столбцов на .row, поэтому Y = 3 означает ширину = 25%.

xs, sm, md, lg - размеры для смартфона, планшета, ноутбука, рабочего стола соответственно.

Точка указания разной ширины на разных размерах экрана позволяет вам делать вещи более крупными на меньших экранах.

пример

<div class="col-lg-6 col-xs-12">

Значение: ширина 50% на рабочих столах, ширина 100% на мобильных устройствах, планшетах и ноутбуках.

Один конкретный случай: перед изучением системы сетки бутстрапов убедитесь, что значение масштабирования браузера установлено на 100% (на сто процентов). Например: Если разрешение экрана (1600 пикселей x 900 пикселей), а увеличение браузера составляет 175%, то элементы "bootstrap-ped" будут сложены.

HTML

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4">class="col-lg-4"</div>
        <div class="col-lg-4">class="col-lg-4"</div>
    </div>
</div>

Chrome zoom 100%

Браузер 100% - элементы, расположенные горизонтально

Chrome zoom 175%

Браузер 175% - сложенные элементы

хорошо он использовал, чтобы сообщить загрузочное число, сколько столбцов должно быть размещено в строке в зависимости от экрана size-

col-xs-2

будет отображать только 2 столбца в строке на дополнительном маленьком экране (xs), так же, как sm определяет маленький экран, md (средний размер), lg (большой размер), но согласно первому правилу bootstrap меньше, если вы отметите

xs-col-2 md-col-4

то в каждой строке будут отображаться 2 столбца для размеров экрана от xs до sm (включая) и изменяется при достижении следующего размера, т.е. для md до lg (в комплекте) для лучшего понимания размеров экрана попробуйте запустить их в различных режимах экрана в chrome (ctr + shift + i) и попробуйте различные пиксели или устройства