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

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

Ответ 1

Обновлено 2019...

Сетка Bootstrap 3 состоит из 4 уровней (или "точек останова")...

Очень маленький (для смартфонов .col-xs-*)
Маленький (для планшетов .col-sm-*)
Средний (для ноутбуков .col-md-*)
Большой (для ноутбуков/настольных ПК .col-lg-*).

Эти размеры сетки позволяют вам управлять поведением сетки на различной ширине. Различные уровни управляются CSS медиа-запросами.

Так в Bootstrap 12-колоночная сетка...

col-sm-3 имеет ширину 3 из 12 столбцов (25%) на типичном небольшом устройстве ширины (> 768 пикселей)

col-md-3 имеет ширину 3 из 12 столбцов (25%) на типичной средней ширине устройства (> 992 пикселя)

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

<div class="col-lg-3 col-md-3 col-sm-3">..</div> - это то же самое, что и

<div class="col-sm-3">..</div>

подразумевается более высокий уровень. Потому что col-sm-3 означает 3 units on sm-and-up, если только он не переопределен более крупным уровнем, который использует другой размер.

xs (по умолчанию)> переопределяется sm> переопределяется md> переопределяется lg

Объедините классы, чтобы использовать ширину столбцов изменения для разных размеров сетки. Это создает адаптивный макет.

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

Сетки sm, md и lg будут все "укладываться" вертикально на экранах/окнах просмотра менее 768 пикселей. Именно здесь вписывается сетка xs. Столбцы, в которых используются классы col-xs-*, не будут располагаться вертикально, и будут продолжать уменьшаться на самых маленьких экранах.

Измените размер своего браузера , используя эту демонстрацию, и вы увидите эффекты масштабирования сетки.

Бутстрап 4

В Bootstrap 4 есть новый размер -xl-, см. это демо. Также был удален инфикс -xs-, поэтому самые маленькие столбцы - это просто col-1, col-2.. col-12 и т.д.

col-* - 0 (хс)
col-sm-* - 576 пикселей
col-md-* - 768 пикселей
col-lg-* - 992 пикселя
col-xl-* - 1200 пикселей

Bootstrap 4 Grid Демо

Кроме того, Bootstrap 4 включает в себя новые столбцы автоматической разметки. Они также имеют отзывчивые точки останова (col, col-sm, col-md и т.д.), Но не имеют определенной ширины%. Поэтому столбцы автоматического размещения заполняются равной шириной по всей строке.

Эта статья объясняет больше о сетке Bootstrap

Ответ 2

Загрузочный 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.

Ответ 3

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

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

Ответ 4

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

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

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

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

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

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

Ответ 5

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

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

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

Ссылка: Grid System

Ответ 6

.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

Ответ 7

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% на мобильных устройствах, планшетах и ноутбуках.

Ответ 8

Один конкретный случай: перед изучением системы сетки бутстрапов убедитесь, что значение масштабирования браузера установлено на 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% - сложенные элементы

Ответ 9

хорошо он использовал, чтобы сообщить загрузочное число, сколько столбцов должно быть размещено в строке в зависимости от экрана 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) и попробуйте различные пиксели или устройства

Ответ 10

Ну, это Bootstrap Grid Divisions для отзывчивости устройств.

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

Если у вас есть какие-либо вопросы, дайте мне знать.