Колонки

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

На этой странице

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

Как они работают

Колонки строятся на архитектуре flexbox сетки. Flexbox означает, что у нас есть возможности для изменения отдельных колонок и изменения групп колонок на уровне строки. Вы выбираете, как колонки растут, сжимаются или иначе изменяются.
При создании макетов сетки все содержимое помещается в колонки. Иерархия сетки Bootstrap идет от контейнера к строке, к колонке, к вашему содержимому. В редких случаях вы можете объединить содержимое и колонку, но имейте в виду, что могут быть непредвиденные последствия.
Bootstrap включает предопределенные классы для создания быстрых, отзывчивых макетов. Имея шесть контрольных точек и дюжину колонок на каждом уровне сетки, у нас есть десятки классов, уже созданных для вас, чтобы создавать желаемые макеты. Это можно отключить через Sass, если вы хотите.

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

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

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

Измените вертикальное выравнивание с помощью любого из отзывчивых классов align-items-*.

Одна из трех колонок

html

<div class="container text-center">
  <div class="row align-items-start">
    <div class="col">
      Одна из трех колонок
    </div>
    <div class="col">
      Одна из трех колонок
    </div>
    <div class="col">
      Одна из трех колонок
    </div>
  </div>
</div>

Одна из трех колонок

html

<div class="container text-center">
  <div class="row align-items-center">
    <div class="col">
      Одна из трех колонок
    </div>
    <div class="col">
      Одна из трех колонок
    </div>
    <div class="col">
      Одна из трех колонок
    </div>
  </div>
</div>

Одна из трех колонок

html

<div class="container text-center">
  <div class="row align-items-end">
    <div class="col">
      Одна из трех колонок
    </div>
    <div class="col">
      Одна из трех колонок
    </div>
    <div class="col">
      Одна из трех колонок
    </div>
  </div>
</div>

Или измените выравнивание каждой колонки отдельно с помощью любого из отзывчивых классов .align-self-*.

Одна из трех колонок

html

<div class="container text-center">
  <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>

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

Измените горизонтальное выравнивание с помощью любого из отзывчивых классов justify-content-*.

Одна из двух колонок

html

<div class="container text-center">
  <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
Последующие колонки продолжаются по новой строке.

html

<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>

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

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

.col-6 .col-sm-3

html

<div class="container text-center">
  <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

html

<div class="container text-center">
  <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 до 5 по всем шести уровням сетки.

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

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

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

html

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

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

Первый в DOM, упорядочен последним

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

Третий в DOM, упорядочен первым

html

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

Если вам нужно больше классов .order-*, вы можете добавить новые, изменив нашу карту Sass $utilities. Прочитайте нашу документацию по картам и циклам Sass или нашу документацию по изменению утилит для подробностей.

$utilities: map-merge(
  $utilities,
  (
    "order": map-merge(
      map-get($utilities, "order"),
      (
        values: map-merge(
          map-get(map-get($utilities, "order"), "values"),
          (
            6: 6, // Добавить новую утилиту `.order-{breakpoint}-6`
            last: 7 // Изменить утилиту `.order-{breakpoint}-last` для использования следующего номера
          )
        ),
      ),
    ),
  )
);

Смещение колонок

Вы можете смещать колонки сетки двумя способами: нашими отзывчивыми классами сетки .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

html

<div class="container text-center">
  <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

html

<div class="container text-center">
  <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 вы можете использовать утилиты отступов, такие как .me-auto, чтобы оттолкнуть соседние колонки друг от друга.

.col-md-4

.col-md-4 .ms-auto

.col-md-3 .ms-md-auto

.col-auto .me-auto

.col-auto

html

<div class="container text-center">
  <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 контрольной точки

html

<div class="col-3 p-3 mb-2">
  .col-3: ширина 25%
</div>

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

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

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

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

И все же, вот вы здесь, все еще упорствуете в чтении этого текста-заполнителя, надеясь на какие-то дополнительные сведения или какое-то скрытое пасхальное яйцо содержимого. Шутку, возможно. К сожалению, здесь ничего такого нет.

html

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

  <p>
    Абзац текста-заполнителя. Мы используем его здесь, чтобы показать использование класса clearfix. Мы добавляем довольно много бессмысленных фраз здесь, чтобы продемонстрировать, как колонки взаимодействуют здесь с плавающим изображением.
  </p>

  <p>
    Как вы можете видеть, абзацы аккуратно обтекают плавающее изображение. Теперь представьте, как это будет выглядеть с реальным содержимым здесь, а не просто этим скучным текстом-заполнителем, который продолжается и продолжается, но на самом деле не несет никакой осязаемой информации. Он просто занимает место и на самом деле не должен читаться.
  </p>

  <p>
    И все же, вот вы здесь, все еще упорствуете в чтении этого текста-заполнителя, надеясь на какие-то дополнительные сведения или какое-то скрытое пасхальное яйцо содержимого. Шутку, возможно. К сожалению, здесь ничего такого нет.
  </p>
</div>