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

Колонки

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

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

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

  • Колонки основаны на архитектуре Flexbox сетки. Flexbox означает, что у нас есть возможности для изменения отдельных колонок и модификации групп колонок на уровне строки. Вы выбираете, как колонки увеличиваются, уменьшаются или изменяются иным образом.

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

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

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

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

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

Одна из трех колонок
Одна из трех колонок
Одна из трех колонок
Одна из трех колонок
Одна из трех колонок
Одна из трех колонок
Одна из трех колонок
Одна из трех колонок
Одна из трех колонок
html
<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>
Одна из трех колонок
Одна из трех колонок
Одна из трех колонок
html
<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>

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

Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
html
<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
Последующие колонки продолжаются вдоль новой строки.
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
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
html
<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
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
html
<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 до 5 на всех шести уровнях сетки.

Первый в DOM, порядок не применяется
Второй в DOM, с наибольшим порядком
Третий в DOM, с 1 порядком
html
<div class="container">
  <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">
  <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-3 .offset-md-3
.col-md-6 .offset-md-3
html
<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
html
<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 Вы можете использовать утилиты полей, такие как .me-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
html
<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
html
<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, чтобы очистить плавающее значение, если текст короче.

PlaceholderАдаптивное плавающее изображение

Абзац текста-заполнителя. Мы используем его здесь, чтобы показать использование класса 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>