Колонки

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

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

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

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

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

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

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

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

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

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

html

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

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

html

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

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

html

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

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

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

html

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

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

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

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

html

<divclass="container text-center"><divclass="row justify-content-start"><divclass="col-4"> Одна из двух колонок
</div><divclass="col-4"> Одна из двух колонок
</div></div><divclass="row justify-content-center"><divclass="col-4"> Одна из двух колонок
</div><divclass="col-4"> Одна из двух колонок
</div></div><divclass="row justify-content-end"><divclass="col-4"> Одна из двух колонок
</div><divclass="col-4"> Одна из двух колонок
</div></div><divclass="row justify-content-around"><divclass="col-4"> Одна из двух колонок
</div><divclass="col-4"> Одна из двух колонок
</div></div><divclass="row justify-content-between"><divclass="col-4"> Одна из двух колонок
</div><divclass="col-4"> Одна из двух колонок
</div></div><divclass="row justify-content-evenly"><divclass="col-4"> Одна из двух колонок
</div><divclass="col-4"> Одна из двух колонок
</div></div></div>

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

Если в одной строке помещается более 12 колонок, каждая группа дополнительных колонок, как одно целое, переносится на новую строку.

.col-9

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

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

html

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

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

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

.col-6 .col-sm-3

html

<divclass="container text-center"><divclass="row"><divclass="col-6 col-sm-3">.col-6 .col-sm-3</div><divclass="col-6 col-sm-3">.col-6 .col-sm-3</div><!-- Force next columns to break to new line --><divclass="w-100"></div><divclass="col-6 col-sm-3">.col-6 .col-sm-3</div><divclass="col-6 col-sm-3">.col-6 .col-sm-3</div></div></div>

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

.col-6 .col-sm-4

html

<divclass="container text-center"><divclass="row"><divclass="col-6 col-sm-4">.col-6 .col-sm-4</div><divclass="col-6 col-sm-4">.col-6 .col-sm-4</div><!-- Force next columns to break to new line at md breakpoint and up --><divclass="w-100 d-none d-md-block"></div><divclass="col-6 col-sm-4">.col-6 .col-sm-4</div><divclass="col-6 col-sm-4">.col-6 .col-sm-4</div></div></div>

Изменение порядка

Классы, определяющие порядок

Используйте классы .order- для управления визуальным порядком вашего контента. Эти классы являются адаптивными, поэтому вы можете установить order с помощью контрольной точки (например, order с помощью контрольной точки (например, .order-1.order-md-2). Включает поддержку от 1 до 5 на всех шести уровнях сетки. Если вам нужно больше классов .order-*, вы можете изменить номер по умолчанию с помощью переменной Sass.

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

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

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

html

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

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

Первый в DOM, порядок последнего

Второй в DOM, без порядка

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

html

<divclass="container text-center"><divclass="row"><divclass="col order-last"> Первый в DOM, порядок последнего
</div><divclass="col"> Второй в DOM, без порядка
</div><divclass="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

html

<divclass="container text-center"><divclass="row"><divclass="col-md-4">.col-md-4</div><divclass="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div></div><divclass="row"><divclass="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div><divclass="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div></div><divclass="row"><divclass="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

<divclass="container text-center"><divclass="row"><divclass="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div><divclass="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><divclass="row"><divclass="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div><divclass="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

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

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

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

.col-3: ширина 25%

.col-sm-9: ширина 75% выше контрольной точки sm

html

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

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

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

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

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

html

<divclass="clearfix"><imgsrc="..."class="col-md-6 float-md-end mb-3 ms-md-3"alt="..."><p> Абзац текста-заполнителя. Мы используем его здесь, чтобы показать использование класса clearfix. Мы добавляем здесь довольно много бессмысленных фраз, чтобы продемонстрировать, как столбцы здесь взаимодействуют с плавающим изображением.
</p><p> Как видите, абзацы изящно обтекают плавающее изображение. А теперь представьте, как это будет выглядеть с фактическим содержанием здесь, а не просто с этим скучным текстом-заполнителем, который продолжается и продолжается, но на самом деле не передает никакой осязаемой информации. Он просто занимает место, и его не стоит читать.
</p><p> И тем не менее, здесь вы, по-прежнему настойчив в чтении этот текст-заполнитель, в надежде еще несколько прозрений, или некоторые скрытые пасхальные яйца содержания. Возможно, шутка. К сожалению, здесь ничего этого нет.
</p></div>