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

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

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

например, если вы начинаете с колоннами: А Б

вы решаете, когда они должны складываться, чтобы быть похожими это:

A

B

C

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

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

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

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

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

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

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

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

С Twitter Bootstrap documentation:

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

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

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

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

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

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

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

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

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

решетки опции:

ссылки: Grid-Системы

.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-X-Y означает на размер экрана X и выше,растянуть этот элемент, чтобы заполнить столбцы г.

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

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

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

пример

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

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

один конкретный случай: перед изучением системы bootstrap grid убедитесь, что масштабирование браузера установлено на 100% (сто процентов). Например: если разрешение экрана (1600px x 900px) и масштаб браузера составляет 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 процентов-элементы размещены горизонтально

хром увеличить 175%

браузер 175 процентов-сложены элементы

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

col-xs-2

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

xs-col-2 md-col-4

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