Cмотреть на GitHub

Система сеток

Используйте нашу мощную мобильную сетку flexbox для создания макетов всех форм и размеров. Используется система «12 колонок», 5-ти адаптивных ярусов, препроцессоров Sass и предустановленных классов.

Как это устроено

Система сеток Bootstrap 4 использует контейнеры, ряды и колонки, чтобы удобно располагать содержимое. Бутстрап реализован с помощью флексбокса и полностью адаптивен. Ниже приведен пример и глубокий взгляд на объединение сетки.

Если вы не знакомы с flexbox, то ознакомьтесь с руководством по флексбоксу CSS Tricks чтобы получить справочную информацию, термины, рекомендаций и фрагменты кода.

Один из трех столбцов

<div class="container">
  <div class="row">
    <div class="col-sm">
      Один из трех столбцов
    </div>
    <div class="col-sm">
      Один из трех столбцов
    </div>
    <div class="col-sm">
      Один из трех столбцов
    </div>
  </div>
</div>

В данном примере с помощью наших предустановленных классов сеток были созданы 3 колонки равной ширины для маленьких, средних и больших девайсов. Эти колонки выровнены с помощью родительского класса .container.

Вот как это работает:

Инструмент для центровки контента сайта. Используйте класс .container для фиксированной ширины или .container-fluid для 100%-ной ширины.
Ряды – это обертка для колонок. Каждая колонка имеет горизонтальный padding (называемый gutter) для контроля пространства между колонками. Этот padding (паддинг) влияет на ряды с отрицательным марджином. В этом случае все содержимое ваших колонок будет визуально центрировано внизу с левой стороны.
Содержимое должно быть расположено в колонках, и только колонки могут быть расположены в рядах.
Благодаря флексбоксу колонки сетки без установленного атрибута «ширина» автоматически получают равную ширину. Например, четыре экземпляра класса .col-sm автоматически (на малых контрольных точках) получат ширину одной колонки = 25%. Подробнее смотрите раздел Автоматическое расположение с помощью колонок.
Цифры в наименовании классов колонок показывают, сколько колонок из 12-ти возможных в ряду вы бы хотели использовать. Так, если вы хотите использовать три колонки одной ширины, используйте .col-sm-4.
Ширина колонок width задана в процентах, что позволяет колонкам быть гибкими и изменять размер относительно их родительского элемента.
Колонки имеют горизонтальный паддинг padding для создания отступов между отдельными колонками, но вы можете удалить марджины margin из рядов и паддинги padding из колонок, добавив класс .no-gutters в .row.
Есть 5 «ярусов» сеток, по одному для каждого «брейкпойнта»: все контрольные точки (экстра маленький), маленький, средний, большой и экстрабольшой.
Ярусы сетки основаны на минимальной широте, т.е. они подходят для каждого вышестоящего яруса (т.е., .col-sm-4 подходит для маленьких, средних, больших и XL девайсов).
Вы можете использовать предопределенные классы сетки (например .col-4) или препроцессоры Sass для создания своей разметки.

Знайте об ограничениях и багах, существующих во флексбоксах, таких как невозможность использования некоторых элементов HTML как гибкие контейнеры.

Параметры сеток

Бутстрап использует em и rem для задания большинства размеров, а пиксели px – для «брейкпойнтов» сетки и ширин контейнеров. Это происходит потому, что ширина зоны видимости на каждом устройстве измеряется в пикселях и не изменяется с размером шрифта.

Посмотрим, как действуют некоторые аспекты системы сеток Bootstrap на разных «ручных» устройствах.

	Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	Extra large ≥1200px
Максимальная ширина контейнера	Нет (авто)	540px	720px	960px	1140px
Префикс класса	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
Число колонок	12
Ширина отступа	30px (15px с каждой стороны столбца)
Может быть вложенным	Да
Упорядочивание колонок	Да

Автоматическое расположение с помощью колонок

Используйте классы столбцов, специфичные для контрольной точки, для упрощения определения размера столбца без явного нумерованного класса, такого как .col-sm-6.

Равная ширина

Например, здесь мы видим две сетки, которые подойдут к любому устройству и зоне видимости, от xs до xl. Добавляйте любое количество простых классов для каждого брейкпойнта, и каждая колонка будет одинаковой ширины.

1 of 2

2 of 2

1 of 3

2 of 3

3 of 3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Мультиряд одинаковой ширины

Чтобы создавать столбцы равной ширины, которые занимают несколько строк, добавьте .w-100 в любом месте, чтобы перенести столбцы на новую строку. Сделайте разрыв отзывчивым, смешав .w-100 с некоторыми адаптивными утилитами отображение элементов.

Столбцы одинаковой ширины могут быть разбиты на несколько строк, но была ошибка флексбокса Safari которая мешала этому работать без явного основания flex-basis или border. Есть обходные пути для более старых версий браузера, но они не не нужны, если вы обновили версию.

col

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="w-100"></div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
</div>

Установка ширины одной колонки

Авто-расположение колонок в сетке флексбокса также дает возможность установить ширину одной колонки, при этом остальные «родственные» колонки автоматически изменят свой размер вокруг нее. Вы можете использовать предустановленные классы сеток (как показано внизу), миксины или инлайн-ширину. Заметим, что другие колонки будут изменять размер независимо от ширины центральной колонки.

1 из 3

2 из 3 (шире)

3 из 3

1 из 3

2 из 3 (шире)

3 из 3

<div class="container">
  <div class="row">
    <div class="col">
      1 из 3
    </div>
    <div class="col-6">
      2 из 3 (шире)
    </div>
    <div class="col">
      3 из 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 из 3
    </div>
    <div class="col-5">
      2 из 3 (шире)
    </div>
    <div class="col">
      3 из 3
    </div>
  </div>
</div>

Содержимое адаптивной ширины

Используйте классы col-{breakpoint}-auto для создания колонок, изменяющих свою ширину по ширине содержимого.

1 из 3

Содержимое переменной ширины

3 из 3

1 из 3

Содержимое переменной ширины

3 из 3

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 из 3
    </div>
    <div class="col-md-auto">
      Содержимое переменной ширины
    </div>
    <div class="col col-lg-2">
      3 из 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 из 3
    </div>
    <div class="col-md-auto">
      Содержимое переменной ширины
    </div>
    <div class="col col-lg-2">
      3 из 3
    </div>
  </div>
</div>

Адаптивные классы

Сетка Bootstrap включает 5 «ярусов» предопределенных классов, используемых для построения сложного адаптивного контента. Адаптируйте размеры своих колонок для правильного их отображения на всех видах и размерах устройств.

Все брейкпойнты

Для сеток, которые выглядят и располагаются одинаково на всех устройствах любого размера, используйте классы .col и .col-*. Определите именованный класс с цифрой, когда вам нужна колонка определенного размера, во всех остальных случаях свободно пользуйтесь .col.

col

col-8

col-4

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>

По горизонтали

Используя один набор из классов .col-sm-*, вы можете создать базовую сетку, которая вначале сложена по вертикали, а потом ее колонки становятся горизонтальными (на экстрамалых девайсах).

col-sm-8

col-sm-4

col-sm

<div class="container">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
</div>

Ищите и создавайте нужное

Не хотите, чтобы ваши колонки шли в одном порядке? Используйте комбинацию разных классов для каждого яруса. Смотрите пример внизу.

.col-md-8

.col-6 .col-md-4

.col-6

<div class="container">
  <!-- Сложите столбцы на мобильном устройстве, сделав одну полную, а другую половинную -->
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Ширина столбцов начинается с 50% на мобильных устройствах и увеличивается до 33,3% на компьютерах -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Столбцы всегда имеют ширину 50% на мобильных устройствах и компьютерах -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

Промежутки между колонками

Промежутки между колонками могут быть оперативно отрегулированы с помощью специфических для точки останова отступов и классов полезности отрицательного поля. Чтобы изменить желоба в данной строке, объедините утилиту отрицательного поля в .row и соответствующие утилиты заполнения в .col. Родитель .container или .container-fluid, возможно, также необходимо настроить, чтобы избежать нежелательного переполнения, используя снова подходящую утилиту заполнения.

Вот пример настройки сетки Bootstrap на большой (lg) точке останова и выше. Мы увеличили заполнение .col с помощью .px-lg-5, противодействовали этому с .mx-lg-n5 на родительском .row, а затем скорректировали обертку .container с помощью .px-lg-5.

Пользовательские отступы столбцов

<div class="container px-lg-5">
  <div class="row mx-lg-n5">
    <div class="col py-3 px-lg-5 border bg-light">Пользовательские отступы столбцов</div>
    <div class="col py-3 px-lg-5 border bg-light">Пользовательские отступы столбцов</div>
  </div>
</div>

Строка столбцов

Используйте отзывчивые классы .row-cols-*, чтобы быстро установить количество столбцов, которые лучше всего отображают ваш контент и макет. В то время как нормальные классы .col-* применяются к отдельным столбцам (например, .col-md-4), классы столбцов строк устанавливаются в родительском .row как ярлык.

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

Используйте эти классы столбцов строк для быстрого создания базовых макетов сетки или для управления макетами карточек.

Столбец

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Столбец</div>
    <div class="col">Столбец</div>
    <div class="col">Столбец</div>
    <div class="col">Столбец</div>
  </div>
</div>

Столбец

<div class="container">
  <div class="row row-cols-3">
    <div class="col">Столбец</div>
    <div class="col">Столбец</div>
    <div class="col">Столбец</div>
    <div class="col">Столбец</div>
  </div>
</div>

Столбец

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Столбец</div>
    <div class="col">Столбец</div>
    <div class="col">Столбец</div>
    <div class="col">Столбец</div>
  </div>
</div>

Столбец

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Столбец</div>
    <div class="col">Столбец</div>
    <div class="col-6">Столбец</div>
    <div class="col">Столбец</div>
  </div>
</div>

Столбец

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Столбец</div>
    <div class="col">Столбец</div>
    <div class="col">Столбец</div>
    <div class="col">Столбец</div>
  </div>
</div>

Вы также можете использовать сопутствующий миксин Sass, row-cols():

.element {
  // Три столбца для начала
  @include row-cols(3);

  // Пять столбцов от средней контрольной точки вверх
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

Выравнивание

Используйте утилиты выравнивания flexbox для выравнивания столбцов по вертикали и горизонтали. Internet Explorer 10-11 не поддерживает вертикальное выравнивание элементов Flex, когда контейнер Flex имеет min-height, как показано ниже. Смотрите Flexbugs # 3 для более подробной информации.

Вертикальное выравнивание

Один из трех столбцов

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      Один из трех столбцов
    </div>
    <div class="col">
      Один из трех столбцов
    </div>
    <div class="col">
      Один из трех столбцов
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      Один из трех столбцов
    </div>
    <div class="col">
      Один из трех столбцов
    </div>
    <div class="col">
      Один из трех столбцов
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      Один из трех столбцов
    </div>
    <div class="col">
      Один из трех столбцов
    </div>
    <div class="col">
      Один из трех столбцов
    </div>
  </div>
</div>

Один из трех столбцов

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      Один из трех столбцов
    </div>
    <div class="col align-self-center">
      Один из трех столбцов
    </div>
    <div class="col align-self-end">
      Один из трех столбцов
    </div>
  </div>
</div>

Горизонтальное выравнивание

Один из двух столбцов

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      Один из двух столбцов
    </div>
    <div class="col-4">
      Один из двух столбцов
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      Один из двух столбцов
    </div>
    <div class="col-4">
      Один из двух столбцов
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      Один из двух столбцов
    </div>
    <div class="col-4">
      Один из двух столбцов
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      Один из двух столбцов
    </div>
    <div class="col-4">
      Один из двух столбцов
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      Один из двух столбцов
    </div>
    <div class="col-4">
      Один из двух столбцов
    </div>
  </div>
</div>

Без промежутков между колонками

Промежутки между колонками в наших предустановленных классах можно удалить с помощью класса .no-gutters, который удаляет отрицательный марждин margin из .row и горизонтальный паддинг padding из всех колонок.

Здесь исходный код для создания этих стилей. Заметим, что переопределения колонок действуют только в первых наследуемых колонках и определяются через селектор атрибута. Этот метод создает более подробный селектор, и паддинг колонки может быть изменен через Отступы.

Нужно создать дизайн «edge-to-edge» (контент плотно прилегает к краям девайса)? Уберите родительский класс .container или .container-fluid.

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

Вот как это работает на практике. Заметьте, что вы можете продолжить использовать это со всеми остальными предустановленными классами сеток (включая ширину колонок, «отзывчивые» ярусы, переопределения и прочее).

.col-sm-6 .col-md-8

.col-6 .col-md-4

<div class="row no-gutters">
  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

Обертка колонки

Если больше 12-ти колонок разместить в одном ряду, каждая дополнительная колонка обернется в новую строку.

.col-9

.col-4
Поскольку 9 + 4 = 13 > 12, этот div шириной в 4 столбца переносится на новую строку как один непрерывный блок.

.col-6
Последующие столбцы продолжаются вдоль новой строки.

<div class="container">
  <div class="row">
    <div class="col-9">.col-9</div>
    <div class="col-4">.col-4<br>Поскольку 9 + 4 = 13 &gt; 12, этот div шириной в 4 столбца переносится на новую строку как один непрерывный блок.</div>
    <div class="col-6">.col-6<br>Последующие столбцы продолжаются вдоль новой строки.</div>
  </div>
</div>

Разрывы колонок

Чтобы сместить колонки на новую строку в гибком контейнере, нужно сделать следующее: добавьте элемент с width: 100% туда, где вы хотите обернуть ваши колонки новой строкой. В норме это достигается с помощью множественных .row, но не каждый исполнительный метод может это поддержать.

.col-6 .col-sm-3

<div class="container">
  <div class="row">
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

    <!-- Заставить следующие столбцы переходить на новую строку -->
    <div class="w-100"></div>

    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  </div>
</div>

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

.col-6 .col-sm-4

<div class="container">
  <div class="row">
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

    <!-- Заставит следующие колонки перейти на следующую строку на брейкпойнте md и выше -->
    <div class="w-100 d-none d-md-block"></div>

    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  </div>
</div>

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

«Гибкий» порядок

Используйте классы .order- - для контроля над визуальным порядком вашего контента. Эти классы «отзывчивы», так что вы можете задать порядок с помощью order брейкпойнта (например, .order-1.order-md-2). Он поддерживает 1 для 12 через все 5 ярусов.

Первый в DOM, порядок не применяется

Второй в DOM, с большим порядком

Третий в DOM, порядка 1

<div class="container">
  <div class="row">
    <div class="col">
      Первый в DOM, порядок не применяется
    </div>
    <div class="col order-12">
      Второй в DOM, с большим порядком
    </div>
    <div class="col order-1">
      Третий в DOM, порядка 1
    </div>
  </div>
</div>

Также существуют адаптивные классы .order-first и .order-last, которые изменяют порядок order элемента, применяя order: -1 и order: 13 (order: $columns + 1) соответственно. Эти классы также могут быть при необходимости смешаны с пронумерованными классами .order-*.

Сначала в DOM, последним порядком

Второй в DOM, неупорядоченный

Третий в DOM, первым порядком

<div class="container">
  <div class="row">
    <div class="col order-last">
      Сначала в DOM, последним порядком
    </div>
    <div class="col">
      Второй в DOM, неупорядоченный
    </div>
    <div class="col order-first">
      Третий в DOM, первым порядком
    </div>
  </div>
</div>

Смещение столбцов

Вы можете смещать столбцы сетки двумя способами: нашими адаптивными классами сетки .offset- и нашими утилитами отступа. Классы сетки имеют размер, соответствующий столбцам, в то время как поля более полезны для быстрых макетов, где ширина смещения является переменной.

Классы смещения

Переместите столбцы вправо, используя классы .offset-md-*. Эти классы увеличивают левое поле столбца на столбцы *. Например, .offset-md-4 перемещает .col-md-4 на четыре столбца.

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  </div>
  <div class="row">
    <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
  </div>
</div>

В дополнение к очистке столбца в ответных контрольных точках Вам может потребоваться сбросить смещения. См. это в действии в примере сетки.

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

<div class="container">
  <div class="row">
    <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
  </div>
  <div class="row">
    <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
    <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
  </div>
</div>

Утилиты отступа

С переходом на flexbox в v4 Вы можете использовать утилиты полей, такие как .mr-auto, чтобы отодвинуть одноуровневые столбцы друг от друга.

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-auto

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto mr-auto">.col-auto .mr-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

Вложенность

Чтобы вложить ваш контент в сетку по умолчанию, добавьте новый класс .row и набор колонок .col-sm-* внутри существующей колонки .col-sm-*. Вложенные ряды должны включать набор колонок, которые добавляется к 12-ти или просто нескольким (не обязательно, чтобы вы использовали все 12 возможных колонок).

Уровень 1: .col-sm-9

Уровень 2: .col-8 .col-sm-6

Уровень 2: .col-4 .col-sm-6

<div class="container">
  <div class="row">
    <div class="col-sm-9">
      Уровень 1: .col-sm-9
      <div class="row">
        <div class="col-8 col-sm-6">
          Уровень 2: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
          Уровень 2: .col-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>

«Примеси» SASS

При использовании исходных файлов Sass в Bootstrap у Вас есть возможность использовать переменные и миксины Sass для создания настраиваемых, семантических и адаптивных макетов страниц. Наши предопределенные классы сетки используют те же самые переменные и миксины, чтобы предоставить целый набор готовых классов для быстрых адаптивных макетов.

Переменные

Переменные и карты определяют число колонок, ширину отступа и контрольную точку медиа-вызова, на которой колонки начинают вести себя как плавающие. Мы используем эти фичи, чтобы генерировать предустановленные классы сетки, которые описаны выше, и миксины, описанные ниже.

$grid-columns:      12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
  // Очень маленький экран / телефон
  xs: 0,
  // Маленький экран / телефон
  sm: 576px,
  // Средний экран / планшет
  md: 768px,
  // Большой экран / настольный
  lg: 992px,
  // Очень большой экран / широкий настольный
  xl: 1200px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);

«Примеси»

Миксины используются в сочетании с переменными сеток для генерации семантического CSS для колонок индивидуальных сеток.

// Создает оболочку для серии столбцов
@include make-row();

// Подготовьте элемент к сетке (применив все, кроме ширины)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);

// Получите удовольствие, смещая или изменяя порядок сортировки
@include make-col-offset($size, $columns: $grid-columns);

Пример использования

Вы можете изменять переменные как вам надо, или просто использовать миксины со значениями по умолчанию. Вот пример использования миксинов, настроенных по умолчанию, для создания двух-колоночного содержимого с разрывом между колонками.

.example-container {
  @include make-container();
  // Обязательно укажите эту ширину после примеси, чтобы переопределить
  // `width: 100%` создано `make-container()`
  width: 800px;
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

Главое содержимое

Вторичное содержимое

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Главое содержимое</div>
    <div class="example-content-secondary">Вторичное содержимое</div>
  </div>
</div>

Настройка сеток

Изменяя встроенные переменные SASS и карты сеток, возможно полностью перенастроить предопределенные классы сеток. Изменяйте количество ярусов, расширения медиаочередей, ширину контейнеров – компилируйте и пользуйтесь.

Колонки и промежутки между ними

Количество столбцов сетки можно изменить с помощью переменных Sass. $grid-columns используется для генерации ширины (в процентах) каждого отдельного столбца, в то время как $grid-gutter-width устанавливает ширину промежутков между столбцами.

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

«Ярусы» сеток

Выходя за рамки самих столбцов, Вы также можете настроить количество уровней сетки. Если Вам нужно всего четыре уровня сетки, Вы бы обновили $grid-breakpoints и $container-max-widths примерно так:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

При внесении любых изменений в переменные или карты Sass Вам необходимо сохранить изменения и перекомпилировать. В результате будет выведен новый набор предопределенных классов сетки для ширины столбцов, смещений и порядка. Утилиты адаптивной видимости также будут обновлены для использования настраиваемых контрольных точек. Убедитесь, что Вы установили значения сетки в px (не rem, em или %).