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

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

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

(где * – некоторое число).

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

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

Игнорируя буквы (x s , sm , md , lg ), я начну с чисел …

  • числа (1-12) представляют часть полной ширины любого div
  • все div разделены на 12 столбцов
  • так что col-*-6 охватывает 6 из 12 столбцов (половина ширины), col-*-12 охватывает 12 из 12 столбцов (вся ширина) и т. д.

Итак, если вы хотите, чтобы два равных столбца охватывали div, напишите

 
Column 1
Column 2

Если вы хотите, чтобы три неравных столбца охватывали ту же ширину, вы могли бы написать:

 
Column 1
Column 2
Column 3

Вы заметите, что число столбцов всегда составляет до 12. Это может быть меньше двенадцати, но будьте осторожны, если больше 12, так как ваши оскорбительные divs будут .row до следующей строки (а не .row , что совсем другая история) ,

Вы также можете .row столбцы в столбцы (лучше всего использовать оболочку .row вокруг них), например:

 
Column 1-a
Column 1-b
Column 2-a
Column 2-b

Каждый набор вложенных div также охватывает до 12 столбцов их родительского div. ПРИМЕЧАНИЕ. Поскольку каждый class .col имеет 15px дополнение с обеих сторон, вы обычно должны обернуть вложенные столбцы в .row , который имеет поля -15px. Это позволяет избежать дублирования отступов и сохраняет содержимое, выровненное между вложенными и не вложенными classами col.

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

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

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

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

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

 
Column 1
Column 2

ПРИМЕЧАНИЕ. В соответствии с приведенным ниже комментарием classы сетки для данного размера экрана применяются к размеру экрана и больше, если другое объявление не отменяет его (то есть 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 колоний, если вы знаете, как они будут реагировать. – Это спорный вопрос, и не все согласны.

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

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

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

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

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

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

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

Система сетки бутстрапа, col - * - 6

Из документации Twitter Bootstrap :

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

Подробнее …

Главное:

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

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

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

Ну вот

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

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

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

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

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

  • Bootstrap 3 - Как загрузить контент в модальном теле через AJAX?
  • Обозначение с левой стороны вместо поля ввода
  • Bootstrap 3: pull-right только для col-lg
  • Расширить строку начальной загрузки за пределами контейнера
  • Bootstrap 3 Navbar с логотипом
  • Внедрение jQuery DatePicker в Bootstrap modal
  • Почему Bootstrap 3 переключился на размер коробки: border-box?
  • Центрировать колонку с помощью Twitter Bootstrap
  • Как вы делаете Twitter-бутстрап-аккордеон, чтобы одна группа открылась?
  • Загрузочный твиттер 3 Модаль с нокаутом
  • Бутстрап с плагином проверки jQuery
  • Interesting Posts

    Независимые от платформы пути в Java

    Самый простой способ конвертировать Blob в массив байтов

    Opera 31: удалить поисковые системы по умолчанию?

    Преобразование существующего проекта Eclipse в проект Maven

    Запуск пользовательского приложения для Android от браузера android

    Почему моя скорость загрузки низкая, несмотря на 1 мегабайт чистой скорости

    Как выполнять команды через дочерний процесс NodeJS?

    Не может быть прозрачным UIToolBar?

    Как отобразить несколько столбцов в UITableView?

    Интернет полностью не в состоянии работать

    Найдите отсутствующие и повторяющиеся элементы в массиве в линейном времени и постоянном пространстве

    d3.js v4: Как получить доступ к исходному индексу родительской группы?

    MySQL – триггер для обновления той же таблицы после вставки

    Как я могу определить, блокирует ли браузер всплывающее окно?

    Есть ли способ отключить некоторые быстрые клавиши в Windows 7?

    Давайте будем гением компьютера.