it-swarm.com.ru

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

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

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

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

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

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

Игнорирование букв (x s , sm , md , 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 с полями -15px. Это позволяет избежать дублирования отступов и сохраняет содержимое выровненным между вложенными и не вложенными классами col.

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

Короче говоря, они используются для определения, при каком размере экрана должен применяться этот класс:

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

Прочтите главу " Grid Options " из официальной документации Bootstrap для получения более подробной информации.

Вы должны обычно классифицировать div, используя несколько классов столбцов, чтобы он вел себя по-разному в зависимости от размера экрана (это и есть то, что делает bootstrap отзывчивым). например: 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 столбцов, если вы знаете, как они будут реагировать. - Это спорный вопрос, и не все с этим согласны.

752
Shawn Taylor

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

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

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

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

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

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

Я также создал изображение ниже, чтобы показать, как работает система сетки, в этих примерах я использую их с 3, например, col-lg-6, чтобы показать вам, как работает система сетки на странице, посмотрите, как lg, md и xs реагируют на окно размер:

Bootstrap grid system, col-*-6

38
Alireza

Главное в этом:

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

Пример: если вы хотите, чтобы на экранах рабочего стола и на экранах телефонов было два столбца, в столбцы добавьте два класса col-md-6 и два класса col-xs-6.

Если вы хотите, чтобы на экранах рабочего стола было два столбца и только один столбец на экранах телефона (то есть две строки, сложенные друг на друга), вы добавляете two col-md-6 и два col-xs-12 в ваши столбцы, а поскольку сумма будет равна 24, они будут автоматически складываться сверху друг друга, или просто оставьте стиль xs вне.

9
Tone Škoda

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

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

Читать дальше ...

9
Aditya P Bhatt

Вот, пожалуйста

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

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

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

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

screen size definitions

2
Dhananjay