Значение чисел в" col-md-4"," col-xs-1"," col-lg-2 " в Бутстрапе

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

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

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

может кто-нибудь объяснить следующее:

  1. как это число выравнивает сетки?
  2. как использовать эти цифры?
  3. что они, собственно, представляют?
323
css grid twitter-bootstrap twitter-bootstrap-3

5 ответов

игнорирование букв (xs, sm, md, lg) сейчас, я начну только с цифр...

  • числа (1-12) представляют собой часть общей ширины любого div
  • все divs разделены на 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, так как ваши оскорбительные дивы будут ударяться в следующий ряд (не .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>

каждый набор вложенных divs также охватывает до 12 столбцов родительского div. Примечание: С каждого .col класс 15px обивка с обеих сторон, вы обычно должны обернуть вложенные столбцы в .row, который имеет -15px поля. Это позволяет избежать дублирования заполнения и сохраняет содержимое между вложенным и не вложенным col занятия.

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

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

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

читать "решетки Опции

659

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

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

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

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

col-lg - выступает за большую колонну ≥ 1200px
col-md - расшифровывается как колонка medium ≥ 992px
col-xs - стойки для колонки экстренной малой ≥ 768px

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

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

Bootstrap grid system, col-*-6

27

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

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

Подробнее...

8

главный момент таков:

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

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

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

7

держи

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

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

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

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

screen size definitions

0