Bootstrap Columns (Столбцы)

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

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

Введение в Столбцы

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

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

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

Создание Столбцов

Давайте рассмотрим примеры создания столбцов в Bootstrap 5.

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

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

<div class="container">
  <div class="row align-items-start">
    <div class="col">Первый столбец</div>
    <div class="col">Второй столбец</div>
    <div class="col">Третий столбец</div>
  </div>
  <!-- Другие варианты выравнивания -->
</div>

Результат:

Первый столбец

Второй столбец

Третий столбец

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

Результат:

Первый столбец

Второй столбец

Третий столбец

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

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

<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 столбцов, каждая группа дополнительных столбцов будет, как единое целое, перенесена на новую строку.

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

Результат:

.col-9

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

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

Разрывы столбцов

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

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

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

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

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

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

Результат:

.col-6 .col-sm-4

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

Упорядочивание классов

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

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

Результат:

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

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

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

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

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

Результат:

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

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

Третий в DOM, заказанный первым

Смещение столбцов

Смещать столбцы сетки можно двумя способами: с помощью наших адаптивных .offset- классов сетки и наших утилит для создания полей. Размеры классов сетки соответствуют размерам столбцов, в то время как поля более полезны для быстрых макетов, где ширина смещения является переменной.

Классы смещения

Перемещайте столбцы вправо с помощью классов .offset-md-*. Эти классы увеличивают левое поле столбца на * столбцы. Например, .offset-md-4 перемещается .col-md-4 на четыре столбца.

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

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

В дополнение к очистке столбцов в адаптивных точках останова может потребоваться сброс смещений. Посмотрите это в действии в примере сетки.

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

 
 
Результат:
.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
 

Утилиты для создания полей

С переходом на flexbox версии 4 вы можете использовать утилиты для выделения полей, такие как .me-auto, для принудительного удаления родственных столбцов друг от друга.

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

.col-md-4 .ms-auto

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

.col-auto .me-auto

.col-auto

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

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

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

Результат:

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

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

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

<div class="clearfix">
  <img src="https://via.placeholder.com/640x360" class="col-md-6 float-md-end mb-3 ms-md-3" alt="...">

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

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

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

Результат:

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

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

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

FAQ (ответы на часто задаваемые вопросы)

Что такое Bootstrap 5 Columns?

Bootstrap 5 Columns (Столбцы) - это часть сетки Bootstrap, которая позволяет вам создавать гибкие макеты, разбивая контент на столбцы для адаптивного отображения на разных устройствах.

Как создать столбцы в Bootstrap 5?

Для создания столбцов в Bootstrap 5 используйте классы col внутри элементов <div class="row">. Например:

<div class="row">
  <div class="col">Первый столбец</div>
  <div class="col">Второй столбец</div>
</div>

Как изменить ширину столбцов?

Вы можете использовать классы col-{breakpoint}-{number} для определения ширины столбцов на разных устройствах. Например:

<div class="row">
  <div class="col-6">Половина ширины</div>
  <div class="col-6">Половина ширины</div>
</div>

Как выровнять столбцы по вертикали?

Используйте классы align-items-start, align-items-center или align-items-end для вертикального выравнивания столбцов.

Как выровнять столбцы по горизонтали?

Используйте классы justify-content-start, justify-content-center, justify-content-end, justify-content-around, justify-content-between или justify-content-evenly для горизонтального выравнивания.

Как добавить маргины (отступы) между столбцами?

Используйте классы g-{number} для добавления отступов между столбцами. Например:

<div class="row g-3">
  <div class="col">Первый столбец</div>
  <div class="col">Второй столбец</div>
</div>

Как скрыть столбец на определенных устройствах?

Используйте классы d-{breakpoint}-none для скрытия столбца на определенных устройствах. Например:

<div class="row">
  <div class="col d-md-none">Скрыт на маленьких экранах</div>
  <div class="col">Виден всегда</div>
</div>

Как сделать столбцы одинаковой высоты?

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

Как добавить фоновый цвет столбцам?

Просто добавьте классы с цветами (например, bg-primary, bg-success, bg-warning) к столбцам.

Как изменить порядок столбцов?

Используйте классы order-first, order-last или order-{n} для управления порядком столбцов.

Как создать столбцы с разными высотами?

Bootstrap не предоставляет прямой способ установки разных высот для столбцов. Однако вы можете использовать дополнительные стили или JavaScript для достижения этой цели.

Заключение

Столбцы в Bootstrap 5 предоставляют множество возможностей для создания гибких и адаптивных макетов. Используйте их с умом, чтобы создавать красивые и функциональные веб-страницы!

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