Значение чисел в «col-md-4», «col-xs-1», «col-lg-2» в Bootstrap

Я запутался с системой сетки в новой Bootstrap, особенно с этими классами:

col-lg-*
col-md-*
col-xs-*

(где * представляет некоторое число).

Может ли кто-нибудь объяснить, пожалуйста, следующее:

1. Как это число выравнивает сетки?
2. Как использовать эти цифры?
3. Что они на самом деле представляют?

Относится только к Bootstrap 3.

Не обращая внимания на письма (х S , см , мкр , Lg ) для в настоящее время , я начну с только цифры ...

• числа (1-12) представляют часть общей ширины любого деления
• все делятся на 12 столбцов
• так, 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класс имеет заполнение по 15px с каждой стороны, обычно следует .rowпомещать вложенные столбцы в a с полями -15px. Это позволяет избежать дублирования отступов и сохраняет содержимое выровненным между вложенными и не вложенными классами col.

- Вы специально не спрашивали об xs, sm, md, lgиспользовании, но они идут рука об руку, поэтому я не могу не коснуться этого ...

Вкратце, они используются для определения размера экрана, который должен применяться этим классом:

• xs = очень маленькие экраны (мобильные телефоны)
• sm = маленькие экраны (планшеты)
• md = средние экраны (некоторые рабочие столы)
• lg = большие экраны (оставшиеся рабочие столы)

Прочтите главу « Параметры сетки » в официальной документации Bootstrap для получения более подробной информации.

Обычно вы должны классифицировать div, используя несколько классов столбцов, чтобы он вел себя по-разному в зависимости от размера экрана (это и есть то, что делает загрузчик отзывчивым). Например: div с классами col-xs-6и col-sm-4будет занимать половину экрана на мобильном телефоне (xs) и 1/3 экрана на планшетах (sm).

<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, и 4 столбца md иlg даже, хотя smи lgникогда не было явно объявлено)

Примечание: если вы не определите xs, он будет по умолчанию col-xs-12(т.е. col-sm-6равна половине ширины на sm, mdи lgэкранах, но полную ширину на xsэкранах).

ПРИМЕЧАНИЕ: на самом деле вполне нормально, если вы .rowвключаете более 12 столбцов, если вы знаете, как они будут реагировать. - Это спорный вопрос, и не все с этим согласны.

Сетка Bootstrap имеет четыре класса:
xs (для телефонов)
sm (для планшетов)
md (для настольных компьютеров)
lg (для больших настольных компьютеров)

Указанные выше классы можно комбинировать для создания более динамичных и гибких макетов.

Совет: Каждый класс масштабируется, поэтому, если вы хотите установить одинаковую ширину для xs и sm, вам нужно только указать xs.

Хорошо, ответ прост, но читайте дальше:

col-lg- обозначает большой столбец ≥ 1200px
col-md обозначает средний столбец ≥ 992px
col-xs- обозначает очень маленький столбец≥ 768px

Числа пикселей являются точками останова, поэтому, например col-xs, нацеливается на элемент, когда окно меньше 768 пикселей (вероятно, мобильных устройств) ...

Я также создал изображение ниже , чтобы показать , как система сетки работает, в этом примере я использую их с 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 :

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

Читать больше ...

Ну вот

col-lg-2: если экран большой ( lg ), тогда этот компонент будет занимать пространство из 2 элементов, учитывая, что вся строка может вместить 12 элементов (поэтому вы увидите, что на большом экране этот компонент занимает 16% пространства строки)

col-lg-6: если экран большой ( lg ), то этот компонент будет занимать пространство из 6 элементов, учитывая, что весь ряд может вместить 12 элементов - при применении вы увидите, что компонент занял половину доступного пространства в строке.

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

Ниже изображение показывает различные размеры экрана: