Перейти к основному содержанию Перейти к навигации по документам

Узнайте, как благодаря нашей системе сеток flexbox изменять столбцы с помощью нескольких опций выравнивания, упорядочивания и смещения. Также смотрите как использовать классы столбцов для управления шириной элементов не связанных с сеткой.

Внимание! Обязательно прочитайте страницу Система сеток, прежде чем углубляться в то, как изменять и настраивать столбцы сетки.

Как это работает

  • Столбцы основаны на архитектуре flexbox. Это означает, что у нас есть опции для изменения отдельных столбцов и изменения групп столбцов на уровне строк. Вы выбираете как столбцы увеличить, уменьшить или изменить иным образом.

  • При построении макетов сетки весь контент помещается в столбцы. Иерархия сетки Bootstrap переходит от контейнера к строке столбца вашего контента. В редких случаях вы можете комбинировать контент и колонку, но делайте это внимателно.

  • Bootstrap включает в себя предопределенные классы для создания быстрых, адаптивных макетов. Имея шесть контрольных точек, дюжину столбцов на каждом уровне сетки и десятки классов, можно создать своих индивидуальные макеты. При желании, это можно настроить через Sass.

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

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

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

Одна из трёх колонок
Одна из трёх колонок
Одна из трёх колонок
Одна из трёх колонок
Одна из трёх колонок
Одна из трёх колонок
Одна из трёх колонок
Одна из трёх колонок
Одна из трёх колонок
<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 class="row justify-content-evenly">
    <div class="col-4">
      Одна из двух колонок
    </div>
    <div class="col-4">
      Одна из двух колонок
    </div>
  </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
.col-6 .col-sm-3
.col-6 .col-sm-3
.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>

    <!-- Force next columns to break to new line -->
    <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
.col-6 .col-sm-4
.col-6 .col-sm-4
.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>

    <!-- Force next columns to break to new line at md breakpoint and up -->
    <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 до 5 на всех шести уровнях сетки.

DOM – это объектная модель документа, которую браузер создаёт в памяти компьютера на основании HTML-кода, полученного им от сервера. Если сказать по-простому, то HTML-код – это текст страницы, а DOM – это набор связанных объектов, созданных браузером при парсинге её текста.
Первый в DOM, но неупорядоченный
Второй в DOM, но последний
Третий в DOM, но первый
<div class="container">
  <div class="row">
    <div class="col">
      Первый в DOM, но неупорядоченный
    </div>
    <div class="col order-5">
      Второй в DOM, но последний
    </div>
    <div class="col order-1">
      Третий в DOM, но первый
    </div>
  </div>
</div>

Также существуют отзывчивые классы .order-first и .order-last, которые изменяют порядок элемента, применяя order order: -1 и order: 6 соответственно. Эти классы также могут применяться с нумерованными классами .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 на 4 колонки.

.col-md-4
.col-md-4 .offset-md-4
.col-md-3 .offset-md-3
.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 вы можете использовать утилиты полей, такие как .mr-auto, чтобы отодвинуть одноуровневые столбцы друг от друга.

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

Автономные классы колонок

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

.col-3: ширина 25%
.col-sm-9: ширина 75% выше контрольной точки sm
<div class="col-3 bg-light p-3 border">
  .col-3: ширина 25%
</div>
<div class="col-sm-9 bg-light p-3 border">
  .col-sm-9: ширина 75% выше контрольной точки sm
</div>

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

PlaceholderResponsive floated image

A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.

As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read.

And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here.

<div class="clearfix">
  <img src="..." class="col-md-6 float-md-end mb-3 ms-md-3" alt="...">

  <p>
    A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.
  </p>

  <p>
    As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read.
  </p>

  <p>
    And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here.
  </p>
</div>