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

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

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

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

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

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

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

Кратко

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

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

xs, sm, md, lg — это размеры для смартфонов, планшетов, ноутбуков и настольных ПК соответственно.

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

Пример

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

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

В Bootstrap есть несколько классов для работы с адаптивной сеткой, которые используются для обозначения разных размеров устройств. Вот их описание:

• .col-xs-$ — для очень малых устройств (Телефоны) с шириной менее 768 пикселей.
• .col-sm-$ — для малых устройств (Планшеты) с шириной 768 пикселей и выше.
• .col-md-$ — для устройств среднего размера (Настольные компьютеры) с шириной 992 пикселя и выше.
• .col-lg-$ — для крупных устройств (Большие настольные компьютеры) с шириной 1200 пикселей и выше.

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