Внимание! Обязательно прочитайте страницу «Сетка», прежде чем углубляться в то, как изменять и настраивать столбцы сетки.
Как они работают
Столбцы основаны на архитектуре flexbox сетки. Flexbox означает, что у нас есть опции для изменения отдельных столбцов и изменения групп столбцов на уровне строки. Вы выбираете, как столбцы увеличиваются, уменьшаются или иным образом изменяются.
При создании макетов сетки все содержимое размещается в столбцах. Иерархия сетки Bootstrap идет от контейнера к строке и столбцу к вашему контенту. В редких случаях вы можете комбинировать контент и столбец, но помните, что это может привести к непредвиденным последствиям.
Bootstrap включает предопределенные классы для создания быстрых, адаптивных макетов. С шестью точками останова и дюжиной столбцов на каждом уровне сетки у нас есть десятки классов, которые уже созданы для вас, чтобы вы могли создавать нужные макеты. Это можно отключить через Sass, если хотите.
Выравнивание
Используйте утилиты выравнивания flexbox для вертикального и горизонтального выравнивания столбцов.
Выравнивание по вертикали
Измените выравнивание по вертикали с помощью любого из адаптивных классов align-items-* .
Один из трех столбцов
Один из трех столбцов
Один из трех столбцов
<дел>
<дел>
Одна из трех колонок
<дел>
Одна из трех колонок
<дел>
Одна из трех колонок
Один из трех столбцов
Один из трех столбцов
Один из трех столбцов
<дел>
<дел>
Одна из трех колонок
<дел>
Одна из трех колонок
<дел>
Одна из трех колонок
Один из трех столбцов
Один из трех столбцов
Один из трех столбцов
<дел>
<дел>
Одна из трех колонок
<дел>
Одна из трех колонок
<дел>
Одна из трех колонок
Или измените выравнивание каждого столбца по отдельности с помощью любого из адаптивных классов . align-self-* .
Один из трех столбцов
Один из трех столбцов
Один из трех столбцов
<дел>
<дел>
Одна из трех колонок
<дел>
Одна из трех колонок
<дел>
Одна из трех колонок
Выравнивание по горизонтали
Измените горизонтальное выравнивание с помощью любого из адаптивных классов justify-content-* .
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
900 02 Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
Одна из двух колонок
<дел>
<дел>
<дел>
Одна из двух колонок
<дел>
Одна из двух колонок
<дел>
<дел>
Одна из двух колонок
<дел>
Одна из двух колонок
<дел>
<дел>
Одна из двух колонок
<дел>
Одна из двух колонок
<дел>
<дел>
Одна из двух колонок
<дел>
Одна из двух колонок
<дел>
<дел>
Одна из двух колонок
<дел>
Одна из двух колонок
<дел>
<дел>
Одна из двух колонок
<дел>
Одна из двух колонок
Перенос столбцов
Если в одной строке размещено более 12 столбцов, каждая группа дополнительных столбцов будет переноситься на новую строку как единое целое.
.col-9
.col-4 Поскольку 9 + 4 = 13 > 12, этот блок div шириной в 4 столбца переносится на новую строку как одна непрерывная единица.
.col-6 Последующие столбцы продолжаются с новой строки.
<дел>
<дел>
.col-9
.col-4 Поскольку 9 + 4 = 13 > 12, этот блок div шириной в 4 столбца переносится на новую строку как одна непрерывная единица.
.col-6 Последующие столбцы продолжаются с новой строки.
Разрывы столбцов
Для переноса столбцов на новую строку во flexbox требуется небольшая хитрость: добавьте элемент с шириной : 100% везде, где вы хотите перенести столбцы на новую строку. Обычно это достигается с помощью нескольких .row s, но не каждый метод реализации может учитывать это.
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
<дел>
<дел>
. col-6 .col-sm-3
.col-6 .col-sm-3
<дел>
.col-6 .col-sm-3
.col-6 .col-sm-3
Вы также можете применить этот разрыв в определенных точках останова с помощью наших утилит адаптивного отображения.
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
<дел>
<дел>
.col-6 .col-sm-4
.col-6 .col-sm-4
<дел>
.col-6 .col-sm-4
.col-6 .col-sm-4
Изменение порядка
Классы заказов
Используйте классы .order- для управления визуальным порядком
вашего контента. Эти классы являются отзывчивыми, поэтому вы можете установить порядок с помощью точки останова (например, . order-1.order-md-2 ). Включает поддержку от 1 до 5 на всех шести уровнях сетки. Если вам нужно больше классов .order-* , вы можете изменить номер по умолчанию с помощью переменной Sass.
Первый в DOM, порядок не применяется
Второй в DOM с большим заказом
Третий в DOM с заказом 1
<дел>
<дел>
Сначала в DOM, порядок не применяется
<дел>
Второй в DOM, с большим заказом
<дел>
Третье место в DOM с порядком 1
Существуют также адаптивные классы .order-first и .order-last , которые изменяют порядок элемента, применяя порядок : -1 и порядок : 6 соответственно. Эти классы также можно смешивать с пронумерованными классами .order-* по мере необходимости.
Первый в DOM, заказанный последним
Второй в DOM, неупорядоченный
Третий в DOM, заказанный первым
<дел>
<дел>
Первый в DOM, заказанный последним
<дел>
Второй в DOM, неупорядоченный
<дел>
Третий в DOM, заказал первым
Смещение столбцов
Вы можете смещать столбцы сетки двумя способами: с помощью наших адаптивных классов сетки . 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
<дел>
.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
В дополнение к очистке столбцов в контрольных точках реагирования может потребоваться сброс смещений. Посмотрите это в действии на примере сетки.
С переходом на 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
<дел>
.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
Отдельные классы столбцов
Классы .col-* также можно использовать вне .row , чтобы задать элементу определенную ширину. Всякий раз, когда классы столбцов используются в качестве непрямых дочерних элементов строки, отступы опускаются.
.col-3: ширина 25%
.col-sm-9: ширина 75% выше контрольной точки sm
.col-3: ширина 25%
<дел>
.col-sm-9: ширина 75% выше контрольной точки sm
Классы можно использовать вместе с утилитами для создания адаптивных плавающих изображений. Не забудьте завернуть содержимое в .clearfix оболочка для очистки поплавка, если текст короче.
PlaceholderАдаптивное плавающее изображение
Абзац текста-заполнителя. Мы используем его здесь, чтобы показать использование класса clearfix. Мы добавили несколько бессмысленных фраз, чтобы продемонстрировать, как столбцы взаимодействуют здесь с плавающим изображением.
Как видите, абзацы изящно обтекают плавающее изображение. А теперь представьте, как это будет выглядеть, если здесь будет какой-то реальный контент, а не просто этот скучный текст-заполнитель, который продолжается и продолжается, но на самом деле не передает никакой ощутимой информации. Это просто занимает место и не должно быть действительно прочитано.
И все же, вот вы, все еще упорно читаете этот текст-заполнитель, надеясь на какие-то новые идеи или какое-то скрытое пасхальное яйцо контента. Шутка, наверное. К сожалению, здесь ничего этого нет.
<дел>
Абзац текста-заполнителя. Мы используем его здесь, чтобы показать использование класса clearfix. Мы добавили несколько бессмысленных фраз, чтобы продемонстрировать, как столбцы взаимодействуют здесь с плавающим изображением.
Как видите, абзацы изящно обтекают плавающее изображение. А теперь представьте, как это будет выглядеть, если здесь будет какой-то реальный контент, а не просто этот скучный текст-заполнитель, который продолжается и продолжается, но на самом деле не передает никакой ощутимой информации. Это просто занимает место и не должно быть действительно прочитано.
И все же, вот вы, все еще упорно читаете этот текст-заполнитель, надеясь на какие-то новые идеи или какое-то скрытое пасхальное яйцо контента. Шутка, наверное. К сожалению, здесь ничего этого нет.
Центрирование элементов DIV по осям X и Y — Махер Хан
Иногда, когда вы получаете макет дизайна веб-сайта или мобильного приложения, вы можете найти элемент, центрированный по горизонтали и вертикали относительно экрана. Для дизайнера это могло бы быть легко, если бы он использовал, скажем, Adobe Illustrator, Sketch или Figma — достаточно двух щелчков мыши, чтобы центрировать элементы дизайна. Если вы разработчик, пытающийся преобразовать этот дизайн в код, вы можете обмануть себя. Ну, вы можете покрыть горизонтальную ось с помощью автоматического поля или текстового центра, но что происходит со злой вертикальной осью Y?
Не напрягайся! Вот 5 замечательных способов идеально центрировать текст или элемент div по обеим осям.
Чтобы настроить, давайте сначала посмотрим, с чем мы будем работать:
Настройка холста.
Золотой ящик внутри — это наш контейнер или родительский
элемент, внутри которого мы можем разместить больше элементов. В наших примерах мы будем придерживаться центрирования текста и элементов, которые могут иметь больше дочерних элементов.
Чтобы установить холст (изображение выше) для нашего примера, мы будем использовать светло-серый фон для и используйте золотую коробку, расположенную посередине внутри.
Вот немного CSS для начала.
HTML {
высота: 100%;
размер шрифта: 30px;
box-sizing: граница-коробка;
}
тело {
маржа: 0;
заполнение: 0;
высота: наследовать;
цвет фона: #e4e4e4;
белый цвет;
дисплей: гибкий;
выравнивание элементов: по центру;
выравнивание содержимого: по центру;
}
. родитель {
цвет фона: золотарник;
ширина: 500 пикселей;
высота: 500 пикселей;
}
.ребенок {
}
На данный момент все готово. Давайте погрузимся в наш первый метод.
Метод 1: Использование таблиц
Этот метод отлично подходит, если вы хотите центрировать текст.
Здесь мы должны установить для свойства display элемента .parent значение table. Затем для дочернего элемента ( h5 ), нам нужно установить для свойства display значение table-cell . Чтобы центрировать текст по вертикали, просто используйте CSS-свойство vertical-align: middle , и все!
Примечание: Это олдскульный способ, и я бы не стал его рекомендовать, тем не менее, это способ.
Метод 1: использование таблиц Метод 2: сетка
Этот метод работает почти так же, как и предыдущий, за исключением того, что он работает не только с текстовыми элементами — вы также можете центрировать целые элементы блока внутри. Кроме того, вам не нужно использовать какой-либо CSS для .child элемент для центрирования. Впрочем, немного стайлинга для этого не особо помешало 😉
<дел>
Элемент по центру
.родитель {
цвет фона: золотарник;
ширина: 500 пикселей;
высота: 500 пикселей;
отображение: сетка;
выравнивание содержимого: по центру;
выравнивание элементов: по центру;
}
.ребенок {
цвет фона: васильковый;
отступ: 10 пикселей;
}
Подсказка: Сокращенная замена justify-content: center и align-items: center простой однострочный:
место-предметы: центр;
Метод 2: Сетка Метод 3: Использование положений
Для этого метода мы будем использовать значения положения относительного и абсолютного . Возможно, вы уже это знаете — чтобы правильно использовать свойство position: absolute для элемента, вам нужно установить значение свойства position его родителя на все, что не является static .
Совет: Перевод значений — это отличный способ центрировать элементы, не беспокоясь о вычислении высоты или ширина элемента, а затем вычитание половины этих значений из верхних и левых значений. Значения перевода -50% автоматически вычисляют это для вас.
Способ 3: Использование позиций Способ 4: Использование Flex
В настоящее время это самый популярный способ центрирования элементов. Давайте посмотрим на код.
<дел>
Элемент по центру
.родитель {
цвет фона: золотарник;
ширина: 500 пикселей;
высота: 500 пикселей;
дисплей: гибкий;
выравнивание содержимого: по центру;
выравнивание элементов: по центру;
}
.ребенок {
цвет фона: васильковый;
отступ: 10 пикселей;
}
Метод 4: Использование Flex
Здесь снова нам не нужно использовать какой-либо CSS для элемента .child , чтобы центрировать его.
Метод 5: Использование Margin Auto
Теперь, когда мы понимаем, как работают свойства отображения сетки и гибкости, давайте посмотрим на следующий код.
Это можно отключить через Sass, если хотите.
Это можно отключить через Sass, если хотите.
align-self-* 
col-6 .col-sm-3
order-1.order-md-2 
offset- 
Посмотрите это в действии на примере сетки.
ms-md-auto
Мы добавили несколько бессмысленных фраз, чтобы продемонстрировать, как столбцы взаимодействуют здесь с плавающим изображением.
Если вы разработчик, пытающийся преобразовать этот дизайн в код, вы можете обмануть себя. Ну, вы можете покрыть горизонтальную ось с помощью автоматического поля или текстового центра, но что происходит со злой вертикальной осью Y?
родитель {
цвет фона: золотарник;
ширина: 500 пикселей;
высота: 500 пикселей;
}
.ребенок {
}
Возможно, вы уже это знаете — чтобы правильно использовать свойство 
Давайте посмотрим на код.