it-swarm.com.ru

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

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

483
StreetCoder

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

Сетка Bootstrap 3 имеет уровни 4 (или «точки останова») ...

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

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

Итак, в сетке Bootstrap с 12 столбцами ...

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

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


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

<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-*, будут not располагаться вертикально и продолжать уменьшаться на самых маленьких экранах.

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


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

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

Bootstrap 4 Grid Демо

Кроме того, эта статья объясняет больше о сетке Bootstrap

453
Zim

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

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

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

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

В

С

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

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

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

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

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

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

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

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

222
ryanman

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

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

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

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

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

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

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

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

24
David Bridge

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

  • Очень маленькие устройства Телефоны (<768 пикселей) - .col-xs-
  • Планшеты для небольших устройств (≥768px) - .col-sm-
  • Средние устройства Рабочие столы (≥992px) - .col-md-
  • Большие устройства Рабочие столы (≥1200px) - .col-lg-

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

 Bootstarp Grid System

Справка: Сетка

8
Ani Menon
.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 
5
Varun Jain

TL; DR

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

3
Alex R

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

1
Ted

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

col-xs-2

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

xs-col-2 md-col-4

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

0
Nemo Holmes