Первый в DOM, первый в отображении
Второй в DOM, последний в отображении
Третий в DOM, третий в отображении
Последний в DOM, второй в отображении
Однако классы order-first и order-last имеют наивысший приоритет.
Смещение колонок
Классы offset-контр_точка-* смещают колонку влево на указанную ширину.
Абзац текста-заполнителя. Мы используем его здесь, чтобы показать использование класса clearfix. Мы добавляем здесь довольно много бессмысленных фраз, чтобы продемонстрировать, как столбцы здесь взаимодействуют с плавающим изображением.
Как видите, абзацы изящно обтекают плавающее изображение. А теперь представьте, как это будет выглядеть с фактическим содержанием здесь, а не просто с этим скучным текстом-заполнителем, который продолжается и продолжается, но на самом деле не передает никакой осязаемой информации. Он просто занимает место, и его не стоит читать.
И тем не менее, здесь вы, по-прежнему настойчив в чтении этот текст-заполнитель, в надежде еще несколько прозрений, или некоторые скрытые пасхальные яйца содержания. Возможно, шутка. К сожалению, здесь ничего этого нет.
Утилиты (доп. классы)
Интервалы
Поля и отступы
Устанавливает margin (внешние границы) или padding (внутренние границы) элементу по умолчанию в диапазоне от .25rem до 3rem.
Форматы классов:
xs: {property}{sides}-{size}
sm, md, lg, xl и xxl {property}{sides}-{breakpoint}-{size}
Значения составляющих:
property
m - для классов, которые устанавливают margin
p - для классов, которые устанавливают padding
sides
t - margin-top или padding-top
b - margin-bottom или padding-bottom
s - margin-left или padding-left в LTR, margin-right или padding-right в RTL
e - margin-right или padding-right в LTR, margin-left или padding-left в RTL
x - *-left и *-right
y - *-top и *-bottom
blank - margin или padding со всех 4 сторон элемента
size
0 - устраняет margin или padding, установив его на 0
1 - margin или padding = $spacer * .25
2 - margin или padding = $spacer * .5
3 - margin или padding = $spacer
4 - margin или padding = $spacer * 1.5
5 - margin или padding = $spacer * 3
auto - margin = авто
Пример:
.mt-0 {
margin-top: 0 !important;
}
.ms-1 {
margin-left: ($spacer * .25) !important;
}
.px-2 {
padding-left: ($spacer * .5) !important;
padding-right: ($spacer * .5) !important;
}
.p-3 {
padding: $spacer !important;
}
Отрицательные отступы
Margin могут использовать отрицательные значения (padding не может). Эти отрицательные поля отключены по умолчанию, но могут быть включены в Sass, установив $enable-negative-margins: true. Синтаксис почти такой же, как у утилит с положительным значением поля по умолчанию, но с добавлением n перед запрошенным размером.
Пример
Класс, противоположный .mt-1:
.mt-n1 {
margin-top: -0.25rem !important;
}