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

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

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

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

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

A

B

C

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

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

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

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

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

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

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

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

С Twitter Bootstrap документация:

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

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

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

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

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

Chrome zoom 175%

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

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

col-xs-2

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

xs-col-2 md-col-4

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