Я запутался с системой сетки в новой Bootstrap, особенно с этими классами:
col-lg-*
col-md-*
col-xs-*
(где * представляет некоторое число).
Может ли кто-нибудь объяснить, пожалуйста, следующее:
- Как это число выравнивает сетки?
- Как использовать эти цифры?
- Что они на самом деле представляют?
Ответы:
Относится только к Bootstrap 3.
Не обращая внимания на письма (х S , см , мкр , Lg ) для в настоящее время , я начну с только цифры ...
col-*-6
охватывает 6 из 12 столбцов (половина ширины),col-*-12
охватывает 12 из 12 столбцов (вся ширина) и т. д.Итак, если вы хотите, чтобы два одинаковых столбца занимали div, напишите
Или, если вы хотите, чтобы три неравных столбца занимали одинаковую ширину, вы можете написать:
Вы заметите, что число столбцов всегда составляет до 12. Это может быть меньше двенадцати, но будьте осторожны, если больше 12, так как ваши оскорбительные div будут переходить к следующему ряду (нет
.row
, это совсем другая история).Вы также можете вкладывать столбцы в столбцы (лучше всего с
.row
оберткой вокруг них), например:Каждый набор вложенных элементов div также охватывает до 12 столбцов родительского элемента div. ПРИМЕЧАНИЕ. Так как каждый
.col
класс имеет заполнение по 15px с каждой стороны, обычно следует.row
помещать вложенные столбцы в a с полями -15px. Это позволяет избежать дублирования отступов и сохраняет содержимое выровненным между вложенными и не вложенными классами col.- Вы специально не спрашивали об
xs, sm, md, lg
использовании, но они идут рука об руку, поэтому я не могу не коснуться этого ...Вкратце, они используются для определения размера экрана, который должен применяться этим классом:
Обычно вы должны классифицировать div, используя несколько классов столбцов, чтобы он вел себя по-разному в зависимости от размера экрана (это и есть то, что делает загрузчик отзывчивым). Например: div с классами
col-xs-6
иcol-sm-4
будет занимать половину экрана на мобильном телефоне (xs) и 1/3 экрана на планшетах (sm).ПРИМЕЧАНИЕ: согласно комментарию ниже, классы сетки для данного размера экрана применяются к этому размеру экрана и больше, если только другое объявление не переопределяет его (то есть
col-xs-6 col-md-4
охватывает 6 столбцовxs
иsm
4, и 4 столбцаmd
иlg
даже, хотяsm
иlg
никогда не было явно объявлено)Примечание: если вы не определите
xs
, он будет по умолчаниюcol-xs-12
(т.е.col-sm-6
равна половине ширины наsm
,md
иlg
экранах, но полную ширину наxs
экранах).ПРИМЕЧАНИЕ: на самом деле вполне нормально, если вы
.row
включаете более 12 столбцов, если вы знаете, как они будут реагировать. - Это спорный вопрос, и не все с этим согласны.источник
.col-xs-2.col-sm-2.col-lg-7
эквивалентно.col-xs-2.col-lg-7
.cols
в ,.row
чтобы избежать и cacel отступы. Мне всегда было интересно, зачем использовать строки и какая разница.Хорошо, ответ прост, но читайте дальше:
col-lg- обозначает большой столбец
≥ 1200px
col-md обозначает средний столбец
≥ 992px
col-xs- обозначает очень маленький столбец
≥ 768px
Числа пикселей являются точками останова, поэтому, например
col-xs
, нацеливается на элемент, когда окно меньше 768 пикселей (вероятно, мобильных устройств) ...Я также создал изображение ниже , чтобы показать , как система сетки работает, в этом примере я использую их с 3, как
col-lg-6
показать вам , как подвесная система работы на странице, посмотрите на то, какlg
,md
иxs
реагируют на размер окна:источник
col-xs-*
были сброшены в Bootstrap 4 в пользуcol-*
Главное в этом:
col-lg-*
col-md-*
col-xs-*
col-sm
Определите, сколько будет столбцов на экранах разных размеров.Пример: если вы хотите, чтобы на экранах рабочего стола и на экранах телефонов было два столбца, в столбцы добавьте два
col-md-6
и дваcol-xs-6
класса.Если вы хотите, чтобы на экранах рабочего стола было два столбца и только один столбец на экранах телефонов (то есть два ряда, сложенных друг на друга), вы должны поместить
two col-md-6
дваcol-xs-12
столбца в столбцы, и, поскольку сумма будет равна 24, они будут автоматически накладываться друг на друга. другой, или просто оставьтеxs
стиль вне.источник
Из документации по загрузке Twitter :
.col-sm-*
,.col-md-*
,.col-lg-*
.Читать больше ...
источник
Ну вот
col-lg-2: если экран большой ( lg ), тогда этот компонент будет занимать пространство из 2 элементов, учитывая, что вся строка может вместить 12 элементов (поэтому вы увидите, что на большом экране этот компонент занимает 16% пространства строки)
col-lg-6: если экран большой ( lg ), то этот компонент будет занимать пространство из 6 элементов, учитывая, что весь ряд может вместить 12 элементов - при применении вы увидите, что компонент занял половину доступного пространства в строке.
Вышеуказанное правило применяется только тогда, когда экран большой. когда экран маленький, это правило отбрасывается и отображается только один компонент на строку.
Ниже изображение показывает различные размеры экрана:
источник