Колонки
Узнайте, как благодаря нашей системе сеток flexbox изменять столбцы с помощью нескольких опций выравнивания, упорядочивания и смещения. Также смотрите как использовать классы столбцов для управления шириной элементов не связанных с сеткой.
Как это работает
Столбцы основаны на архитектуре flexbox. Это означает, что у нас есть опции для изменения отдельных столбцов и изменения групп столбцов на уровне строк. Вы выбираете как столбцы увеличить, уменьшить или изменить иным образом.
При построении макетов сетки весь контент помещается в столбцы. Иерархия сетки Bootstrap переходит от контейнера к строке столбца вашего контента. В редких случаях вы можете комбинировать контент и колонку, но делайте это внимателно.
Bootstrap включает в себя предопределенные классы для создания быстрых, адаптивных макетов. Имея шесть контрольных точек, дюжину столбцов на каждом уровне сетки и десятки классов, можно создать своих индивидуальные макеты. При желании, это можно настроить через Sass.
Выравнивание
Используйте утилиты выравнивания flexbox для выравнивания столбцов по вертикали и горизонтали.
Вертикальное выравнивание
<divclass="container"><divclass="row align-items-start"><divclass="col"> Одна из трёх колонок </div><divclass="col"> Одна из трёх колонок </div><divclass="col"> Одна из трёх колонок </div></div><divclass="row align-items-center"><divclass="col"> Одна из трёх колонок </div><divclass="col"> Одна из трёх колонок </div><divclass="col"> Одна из трёх колонок </div></div><divclass="row align-items-end"><divclass="col"> Одна из трёх колонок </div><divclass="col"> Одна из трёх колонок </div><divclass="col"> Одна из трёх колонок </div></div></div><divclass="container"><divclass="row"><divclass="col align-self-start"> Одна из трёх колонок </div><divclass="col align-self-center"> Одна из трёх колонок </div><divclass="col align-self-end"> Одна из трёх колонок </div></div></div>Горизонтальное выравнивание
<divclass="container"><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-ти колонок разместить в одном ряду, то каждая группа дополнительных колонок, как одно целое, переносится на новую строку.
Поскольку 9 + 4 = 13 > 12, этот div шириной 4 колонки переносится на новую строку как один непрерывный блок.
Последующие колонки продолжаются вдоль новой строки.
<divclass="container"><divclass="row"><divclass="col-9">.col-9</div><divclass="col-4">.col-4<br>Поскольку 9 + 4 = 13 > 12, этот div шириной 4 колонки переносится на новую строку как один непрерывный блок.</div><divclass="col-6">.col-6<br>Последующие колонки продолжаются вдоль новой строки.</div></div></div>Разрывы колонок
Чтобы сместить колонки на новую строку в гибком контейнере, нужно сделать следующее: добавьте элемент с шириной width: 100% туда, где вы хотите обернуть ваши колонки новой строкой. Обычно это достигается с помощью нескольких .row, но не каждый исполнительный метод поддерживает это.
<divclass="container"><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>Вы можете также применять это в брейкпойнтах с нашими отзывчивыми утилитами отображения элементов.
<divclass="container"><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-1.order-md-2). Включает поддержку от 1 до 5 на всех шести уровнях сетки.
<divclass="container"><divclass="row"><divclass="col"> Первый в DOM, но неупорядоченный </div><divclass="col order-5"> Второй в DOM, но последний </div><divclass="col order-1"> Третий в DOM, но первый </div></div></div>Также существуют отзывчивые классы .order-first и .order-last, которые изменяют порядок элемента, применяя orderorder: -1 и order: 6 соответственно. Эти классы также могут применяться с нумерованными классами .order-* по мере необходимости.
<divclass="container"><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 на 4 колонки.
<divclass="container"><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>В дополнение к «сбросу» колонок на брейкпойнтах, вам может понадобиться сброс офсетов. Смотрите пример с разметкой.
<divclass="container"><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 вы можете использовать утилиты полей, такие как .me-auto, чтобы отодвинуть одноуровневые столбцы друг от друга.
<divclass="container"><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 для придания элементу определенной ширины. Всякий раз, когда классы столбцов используются как непрямые дочерние элементы строки, отступы опускаются.
<divclass="col-3 bg-light p-3 border"> .col-3: ширина 25%
</div><divclass="col-sm-9 bg-light p-3 border"> .col-sm-9: ширина 75% выше контрольной точки sm
</div>Классы могут использоваться вместе с утилитами для создания адаптивных плавающих изображений. Обязательно оберните содержимое в оболочку .clearfix, чтобы очистить текст, если текст более короткий.
Абзац текста-заполнителя. Мы используем его здесь, чтобы показать использование класса clearfix. Мы добавляем здесь довольно много бессмысленных фраз, чтобы продемонстрировать, как столбцы здесь взаимодействуют с плавающим изображением.
Как видите, абзацы изящно обтекают плавающее изображение. А теперь представьте, как это будет выглядеть с фактическим содержанием здесь, а не просто с этим скучным текстом-заполнителем, который продолжается и продолжается, но на самом деле не передает никакой осязаемой информации. Он просто занимает место, и его не стоит читать.
И тем не менее, здесь вы, по-прежнему настойчив в чтении этот текст-заполнитель, в надежде еще несколько прозрений, или некоторые скрытые пасхальные яйца содержания. Возможно, шутка. К сожалению, здесь ничего этого нет.
<divclass="clearfix"><imgsrc="..."class="col-md-6 float-md-end mb-3 ms-md-3"alt="..."><p> Абзац текста-заполнителя. Мы используем его здесь, чтобы показать использование класса clearfix. Мы добавляем здесь довольно много бессмысленных фраз, чтобы продемонстрировать, как столбцы здесь взаимодействуют с плавающим изображением. </p><p> Как видите, абзацы изящно обтекают плавающее изображение. А теперь представьте, как это будет выглядеть с фактическим содержанием здесь, а не просто с этим скучным текстом-заполнителем, который продолжается и продолжается, но на самом деле не передает никакой осязаемой информации. Он просто занимает место, и его не стоит читать. </p><p> И тем не менее, здесь вы, по-прежнему настойчив в чтении этот текст-заполнитель, в надежде еще несколько прозрений, или некоторые скрытые пасхальные яйца содержания. Возможно, шутка. К сожалению, здесь ничего этого нет. </p></div>