В этом уроке мы узнаем, как изменять колонки с помощью множества вариантов выравнивания, упорядочивания и смещения благодаря нашей системе сетки flexbox. Кроме того, мы узнаем, как использовать классы колонок для управления шириной элементов, не относящихся к сетке.
Как правило, элемент колонки внутри строки использует ширину колонки также с помощью классов Bootstrap.
Синтаксис для назначения колонки
Col-{size}-{Number}
{size} = Размер области просмотра, на которую вы ориентируетесь
{number} = Количество колонок, которые должен охватывать элемент
Примечание: SIZES включает none(<576), sm(>=≥576), md(>=768), lg(>=992), xl(>=1200), xxl(>=1400) Number Of columns : Любое целое число от 1 до 12.
Пример: «cols-xs-12».
Как это работает
Колонки основаны на архитектуре flexbox сетки. Flexbox означает, что у нас есть возможность изменять отдельные колонки и группы колонок на уровне строки. Вы сами выбираете, как будут расти, уменьшаться или иным образом изменяться колонки.
При построении макетов сетки все содержимое размещается в колонках. Иерархия сетки Bootstrap идет от контейнера к строке, от строки к столбцу, от столбца к содержимому. В редких случаях вы можете объединить содержимое и колонки, но имейте в виду, что это может привести к непредвиденным последствиям.
Bootstrap включает предопределенные классы для создания быстрых, отзывчивых макетов. С шестью точками разрыва и дюжиной колонок на каждом уровне сетки, у нас есть десятки классов, уже созданных для вас, чтобы создать желаемые макеты. При желании это можно отключить с помощью Sass.
Выравнивание
Используйте утилиты выравнивания flexbox для вертикального и горизонтального выравнивания колонок.
Вертикальное выравнивание
<div class="d-flex align-items-start bg-light mb-3" style="height: 100px;">
<div class="col">One of three columns</div>
<div class="col">One of three columns</div>
<div class="col">One of three columns</div>
</div>
<div class="d-flex align-items-center bg-light mb-3" style="height: 100px;">
<div class="col">One of three columns</div>
<div class="col">One of three columns</div>
<div class="col">One of three columns</div>
</div>
<div class="d-flex align-items-end bg-light mb-3" style="height: 100px;">
<div class="col">One of three columns</div>
<div class="col">One of three columns</div>
<div class="col">One of three columns</div>
</div>
<div class="row" style="height:10rem">
<div class="col align-self-start">
One of three columns
</div>
<div class="col align-self-center">
One of three columns
</div>
<div class="col align-self-end">
One of three columns
</div>
</div>
Горизонтальное выравнивание
<div class="row justify-content-start">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-end">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-around">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-between">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-evenly">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
Обертывание столбцов
Если в одной строке размещено более 12 столбцов, каждая группа дополнительных столбцов, как единое целое, будет обернута на новую строку.
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>Since 9 + 4 = 13 > 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>
Разрывы колонок
Для разрыва колонок на новую строку во flexbox требуется небольшой хак: добавьте элемент с шириной: 100% везде, где вы хотите развернуть колонки на новую строку. Обычно это достигается с помощью нескольких .rows, но не каждый метод реализации может это учесть.
<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>
Переупорядочивание
Классы упорядочивания
Используйте классы .order- для управления визуальным порядком содержимого. Эти классы являются отзывчивыми, поэтому вы можете установить порядок по точкам останова (например, .order-1.order-md-2). Поддерживается порядок от 1 до 5 на всех шести уровнях сетки.
<div class="row">
<div class="col">
First in DOM, no order applied
</div>
<div class="col order-5">
Second in DOM, with a larger order
</div>
<div class="col order-1">
Third in DOM, with an order of 1
</div>
</div>
Существуют также отзывчивые классы .order-first и .order-last, которые изменяют порядок элемента, применяя order: -1 и order: 6, соответственно. При необходимости эти классы можно смешивать с нумерованными классами .order-*.
<div class="row">
<div class="col order-last">
First in DOM, ordered last
</div>
<div class="col">
Second in DOM, unordered
</div>
<div class="col order-first">
Third in DOM, ordered first
</div>
</div>
Смещение столбцов
Вы можете смещать колонки сетки двумя способами: наши отзывчивые классы сетки .offset- и наши утилиты полей. Классы сетки имеют размеры, соответствующие столбцам, в то время как поля более полезны для быстрых макетов, где ширина смещения может быть различной.
Классы смещения
Переместите колонки вправо с помощью классов .offset-md-*. Эти классы увеличивают левое поле колонки на * колонок. Например, .offset-md-4 перемещает .col-md-4 на четыре колонки.
<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 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>
Утилиты для работы с полями
С переходом на flexbox вы можете использовать утилиты margin, такие как .me-auto, для принудительного удаления столбцов-близнецов друг от друга.
<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>
Отдельные классы колонок
Классы .col-* можно использовать и вне .row, чтобы придать элементу определенную ширину. При использовании классов столбцов в качестве непрямых дочерних элементов строки отступы опускаются.
<div class="col-3 p-3 border">
.col-3: width of 25%
</div>
<div class="col-sm-9 p-3 border">
. col-sm-9: width of 75% above sm breakpoint
</div>
Классы можно использовать вместе с утилитами для создания отзывчивых плавающих изображений. Обязательно оберните содержимое в фиксированную обертку .clear, чтобы убрать плавающее изображение, если текст короче.
<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>
Желоба
Желоба — это прокладки между колонками, используемые для отзывчивого размещения и выравнивания контента в системе сетки Bootstrap.
Как они работают
Желоба — это промежутки между содержимым колонок, создаваемые горизонтальными прокладками. Мы устанавливаем padding-right и padding-left для каждого столбца и используем отрицательные поля для смещения в начале и конце каждой строки, чтобы выровнять содержимое.
Ширина желобов начинается с 1,5rem (24px). Это позволяет нам согласовать нашу сетку с масштабом распорок padding и margin.
Водостоки могут быть настроены в соответствии с реакцией. Для изменения горизонтальных, вертикальных и всех водостоков используйте классы водостоков, специфичные для точки останова.
Горизонтальные желоба
Классы .gx-* можно использовать для управления шириной горизонтальных желобов. Родительский .container или .container-fluid может потребовать корректировки, если используются желоба большего размера, чтобы избежать нежелательного переполнения, используя соответствующую утилиту padding. Например, в следующем примере мы увеличили отступы с помощью .px-4:
<div class="container px-4">
<div class="row gx-5">
<div class="col">
<div class="p-3">Custom column padding</div>
</div>
<div class="col">
<div class="p-3">Custom column padding</div>
</div>
</div>
</div>
Альтернативное решение — добавить обертку вокруг. строки с классом. overflow-hidden:
<div class="container overflow-hidden">
<div class="row gx-5">
<div class="col">
<div class="p-3">Custom column padding</div>
</div>
<div class="col">
<div class="p-3">Custom column padding</div>
</div>
</div>
</div>
Вертикальные желоба
Классы .gy-* можно использовать для управления шириной вертикальных желобов. Как и горизонтальные желоба, вертикальные желоба могут вызывать некоторое переполнение под .row в конце страницы. Если это происходит, добавьте обертку вокруг .row с помощью класса .overflow-hidden:
<div class="container overflow-hidden">
<div class="row gy-5">
<div class="col-6">
<div class="p-3">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3">Custom column padding</div>
</div>
</div>
</div>
Горизонтальный & вертикальные желоба
Классы .g-* можно использовать для управления шириной горизонтального желоба. В следующем примере мы используем меньшую ширину желоба, поэтому нет необходимости добавлять класс-обертку .overflow-hidden.
<div class="container">
<div class="row g-2">
<div class="col-6">
<div class="p-3">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3">Custom column padding</div>
</div>
</div>
</div>
Желоба для столбцов строк
Классы желоба можно также добавить к столбцам строк. В следующем примере мы используем отзывчивые колонки строк и отзывчивые классы водостока.
<div class="container">
<div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
<div class="col">
<div class="p-3">Row column</div>
</div>
<div class="col">
<div class="p-3">Row column</div>
</div>
<div class="col">
<div class="p-3">Row column</div>
</div>
<div class="col">
<div class="p-3">Row column</div>
</div>
<div class="col">
<div class="p-3">Row column</div>
</div>
<div class="col">
<div class="p-3">Row column</div>
</div>
<div class="col">
<div class="p-3">Row column</div>
</div>
<div class="col">
<div class="p-3">Row column</div>
</div>
<div class="col">
<div class="p-3">Row column</div>
</div>
<div class="col">
<div class="p-3">Row column</div>
</div>
</div>
</div>
Без желобов
Желоба между колонками в наших предопределенных классах сетки можно удалить с помощью .g-0. Это удаляет отрицательные поля из .row и горизонтальную прокладку из всех ближайших дочерних колонок.
Нужен дизайн от края до края? Уберите родительский .container или .container-fluid.
На практике вот как это выглядит. Обратите внимание, что вы можете продолжать использовать это со всеми другими предопределенными классами сетки (включая ширину столбцов, отзывчивые уровни, переупорядочивание и многое другое).
<div class="row g-0">
<div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
Изменение желобов
Классы строятся из Sass-карты $gutters, которая наследуется.
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);