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

Узнайте, как благодаря нашей системе сеток 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>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
    <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</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 classes

Use .order- classes for controlling the visual order of your content. These classes are responsive, so you can set the order by breakpoint (e.g., .order-1.order-md-2). Includes support for 1 through 5 across all six grid tiers.

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, но последнийSecond in DOM, unordered
    </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 .ml-auto
.col-md-3 .ml-md-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>

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

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

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

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

PlaceholderResponsive floated image

Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris paddenstoel nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Sed posuere consectetur est at lobortis. Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Id nullam tellus relem amet commodo telemque olemit. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Donec id elit non mi porta gravida at eget metus. Aenean eu leo quam. Pellentesque ornare sem lantaarnpaal quam venenatis vestibulum. Donec sed odio dui. Maecenas faucibus mollis interdum. Nullam quis risus eget urna salsa tequila vel eu leo. Donec id elit non mi porta gravida at eget metus.

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

  <p>
    Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris paddenstoel nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </p>

  <p>
    Sed posuere consectetur est at lobortis. Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Id nullam tellus relem amet commodo telemque olemit. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
  </p>

  <p>
    Donec id elit non mi porta gravida at eget metus. Aenean eu leo quam. Pellentesque ornare sem lantaarnpaal quam venenatis vestibulum. Donec sed odio dui. Maecenas faucibus mollis interdum. Nullam quis risus eget urna salsa tequila vel eu leo. Donec id elit non mi porta gravida at eget metus.
  </p>
</div>