Отступы
Bootstrap включает широкий диапазон сокращений откликов и полезных классов для изменения внешнего вида элемента.
Как это устроено
Назначайте «отзывчивые» значения margin
или padding
элементу или поднабору его сторон с помощью удобных классов. Сюда входит поддержка индивидуальных свойств, всех свойств и вертикальных и горизонтальных свойств. Классы созданы дефолтной карте Sass, и варьируются от .25rem
до 3rem
.
Замечание
Утилиты отступов, которые работают на всех брейкпойнтах – от xs
до xl
– не имеют аббревиатуры брейкпойнта в названии. Это сделано потому, что те классы применяются, начиная с min-width: 0
и выше, и т.о. не привязаны к медиа-запросам. Названия остающихся брейкпойнтов, однако, содержит в себе аббревиатуры брейкпойнтов.
Классы названы по формату {property}{sides}-{size}
для xs
и {property}{sides}-{breakpoint}-{size}
для sm
, md
, lg
и xl
.
Где свойство – это одно из:
m
- для классов, которые задаютmargin
p
- для классов, которые задаютpadding
Где свойство – это одно из:
t
- для классов, которые задаютmargin-top
илиpadding-top
b
- для классов, которые задаютmargin-bottom
илиpadding-bottom
l
- для классов, которые задаютmargin-left
илиpadding-left
r
- для классов, которые задаютmargin-right
илиpadding-right
x
- для классов, которые задают и*-left
и*-right
y
- для классов, которые задают и*-top
и*-bottom
- blank - для классов, которые задают
margin
илиpadding
для всех 4-х сторон элемента
Где размер – это один из:
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
как auto
(Вы можете добавить больше размеров, добавляя разделы в карту Sass $spacers
.)
Примеры
Вот несколько понятных примеров этих классов:
Горизонтальное центрирование
В дополнение, Bootstrap также включает класс .mx-auto
для горизонтального выравнивания блока блока содержимого фиксированной ширины – т.е. контент, которому заданы display: block
и набор width
с помощью установки горизонтальных марджинов как auto
.
Отрицательные отступы
В CSS свойства полей margin
могут использовать отрицательные значения (padding
не может). Начиная с версии 4.2, мы добавляли утилиты с отрицательным запасом для каждого ненулевого целочисленного размера, указанного выше (например, 1
, 2
, 3
, 4
, 5
). Эти утилиты идеально подходят для настройки желобов столбцов сетки через точки останова (breakpoints).
Синтаксис почти такой же, как у утилит с положительным запасом по умолчанию, но с добавлением n
перед запрошенным размером. Вот пример класса, который противоположен .mt-1
:
Вот пример настройки сетки Bootstrap на средней (md
) точке останова и выше. Мы увеличили заполнение .col
с помощью .px-md-5
, а затем противодействовали этому с .mx-md-n5
на родительском .row
.