Я запутался с системой сетки в новой Bootstrap, особенно с этими классами:
col-lg-*
col-md-*
col-xs-*
(где * обозначает некоторое число).
Может ли кто-нибудь объяснить, пожалуйста, следующее:
Относится только к Bootstrap 3.
Игнорируя буквы (xs, sm, md, lg) , пока, я начну только с цифр...
col-*-6 охватывает 6 из 12 столбцов (на половину ширины), col-*-12 охватывает 12 из 12 столбцов (на всю ширину) и т.д.Итак, если вы хотите, чтобы два одинаковых столбца занимали div, напишите
<div class="col-xs-6">Column 1</div>
<div class="col-xs-6">Column 2</div>
Или, если вы хотите, чтобы три неравных столбца имели одинаковую ширину, можно написать:
<div class="col-xs-2">Column 1</div>
<div class="col-xs-6">Column 2</div>
<div class="col-xs-4">Column 3</div>
Вы заметите, что число столбцов всегда составляет до 12. Это может быть меньше двенадцати, но будьте осторожны, если больше 12, так как ваши оскорбительные div опустятся до следующей строки (не .row, что совсем другая история).
Вы также можете вкладывать столбцы в столбцы(лучше всего с оберткой .row), например:
<div class="col-xs-6">
<div class="row">
<div class="col-xs-4">Column 1-a</div>
<div class="col-xs-8">Column 1-b</div>
</div>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-2">Column 2-a</div>
<div class="col-xs-10">Column 2-b</div>
</div>
</div>
Каждый набор вложенных элементов div также занимает до 12 столбцов родительского элемента div. ПРИМЕЧАНИЕ: Поскольку каждый класс .col имеет заполнение по 15 пикселей с каждой стороны, обычно следует заключать вложенные столбцы в .row с полями -15px. Это позволяет избежать дублирования отступов и позволяет выровнять содержимое между вложенными и не вложенными классами col.
- Вы специально не спрашивали об использовании xs, sm, md, lg, но они идут рука об руку, поэтому я не могу не коснуться его...
Вкратце, они используются для определения размера экрана, который должен применяться этим классом:
Прочитайте "сетку Options" глава из официальной документации Bootstrap для более подробной информации.
Обычно вы должны классифицировать div, используя несколько классов столбцов, чтобы он вел себя по-разному в зависимости от размера экрана (это и есть то, что делает загрузчик отзывчивым). например: div с классами col-xs-6 и col-sm-4 будет занимать половину экрана мобильного телефона (xs) и 1/3 экрана планшета (см).
<div class="col-xs-6 col-sm-4">Column 1</div> <!-- 1/2 width on mobile, 1/3 screen on tablet) -->
<div class="col-xs-6 col-sm-8">Column 2</div> <!-- 1/2 width on mobile, 2/3 width on tablet -->
ПРИМЕЧАНИЕ: согласно приведенному ниже комментарию, классы сетки для данного размера экрана применяются к этому размеру экрана и больше, если другое объявление не переопределяет его (т.е. col-xs-6 col-md-4 охватывает 6 столбцов в xs и sm, и 4 столбца в md и lg, хотя sm и lg никогда не были явно объявлены)
ПРИМЕЧАНИЕ: если вы не определите xs, по умолчанию будет установлено значение col-xs-12 (т.е. col-sm-6 составляет половину ширины на экранах sm, md и lg, но полноразмерное на xs экраны).
ПРИМЕЧАНИЕ: на самом деле вполне нормально, если ваш .row содержит более 12 столбцов, если вы знаете, как они будут реагировать. --This является спорным вопросом, и не все с этим согласны.
The Bootstrap grid system has four classes:
xs (for phones)
sm (for tablets)
md (for desktops)
lg (for larger desktops)Указанные выше классы можно комбинировать для создания более динамичных и гибких макетов.
Совет: Каждый класс масштабируется, поэтому, если вы хотите установить одинаковую ширину для хз и см, вам нужно только указать хз.
Хорошо, ответ прост, но читайте дальше:
col-lg- обозначает большой столбец ≥ 1200px
col-md- обозначает средний столбец ≥ 992px
col-xs- обозначает очень маленький столбец ≥ 768px
Числа в пикселях являются точками останова, поэтому, например, col-xs нацеливается на элемент, когда окно меньше 768px(вероятно, на мобильных устройствах)...
Я также создал изображение ниже, чтобы показать, как работает система сетки, в этих примерах я использую их с 3, например, col-lg-6, чтобы показать вам, как работает система сетки на странице, посмотреть, как lg, md и xs реагирует на размер окна:
Главное:
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 элементов - при применении вы увидите, что компонент занял половину доступного пространства в строке.
Вышеуказанное правило применяется только при большом экране. когда экран маленький, это правило отбрасывается, и в строке отображается только один компонент.
На рисунке ниже показаны различные размеры экрана:
