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


440

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

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

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

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

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

13
Вы найдете объяснение здесь . Вы можете использовать число в столбце по своему усмотрению, но убедитесь, что сумма номеров всех столбцов в одной строке должна быть равна 12
Doan Cuong

Ответы:


835

Относится только к 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 столбцов, если вы знаете, как они будут реагировать. - Это спорный вопрос, и не все с этим согласны.


38
Также стоит отметить, что классы сетки для данного размера экрана применяются к экранам такого размера и больше , если только они не будут переопределены. Например, .col-xs-2.col-sm-2.col-lg-7эквивалентно. col-xs-2.col-lg-7
cvrebert

5
Вы должны внести исправления в свой пример относительно вложенности. Вложение требует вставки строки в столбец, в который вы вкладываете другие столбцы. Если вы не добавите строку, у вас будет двойной отступ. Чтобы лучше понять это, см. Схему в моем ответе здесь: stackoverflow.com/questions/23899715/…
jme11

1
очень хорошее объяснение, спасибо. Я люблю немного о обертывание .colsв , .rowчтобы избежать и cacel отступы. Мне всегда было интересно, зачем использовать строки и какая разница.
Риширадж Пурохит

Но в документации кажется, что общая ширина div превышает более 12, до 18 для «xs». Пожалуйста, посмотрите на раздел «Смешанные: мобильные и настольные» и почему это так? getbootstrap.com/docs/3.3/examples/grid
Мишель,

@ Мишель, похоже, вы неправильно понимаете их документацию. там показаны два отдельных параметра xs - один для 12 столбцов (полная ширина) и один для 6 столбцов (полуширина). Вы увидите, что эти столбцы также показывают lg-8 и lg-4 - они показывают, что они будут охватывать 8 и 4 столбца (2/3 + 1/3 общей ширины ширины) на больших дисплеях и 12 и 6 (полная ширина + 1/2 следующего ряда) на дисплеях телефона. надеюсь, это поможет!
Шон Тейлор

47

Сетка 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реагируют на размер окна:

Система сетки Bootstrap, col - * - 6


1
col-xs-*были сброшены в Bootstrap 4 в пользуcol-*
Зохаб Али

Не могли бы вы поделиться HTML (и, возможно, любой CSS)? Спасибо.
NoChance

11

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

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

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

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



6

Ну вот

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

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

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

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

определения размера экрана

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.