Интервал

Поля и отступы

Присваивайте удобные для восприятия значения margin или padding элементу или подмножеству его сторон с помощью сокращенных классов. Включает поддержку отдельных свойств, всех свойств, а также свойств по вертикали и горизонтали. Классы строятся из карты Sass по умолчанию в диапазоне от .25rem до 3rem.

Примечание

Утилиты интервалов, которые применяются ко всем контрольным точкам, от xs до xxl, не имеют в них аббревиатуры контрольные точки. Это связано с тем, что эти классы применяются начиная с min-width: 0 и выше и поэтому не связаны медиа-запросом. Остальные контрольные точки, однако, содержат аббревиатуру контрольные точки.

Классы именуются в формате {property}{sides}-{size} для xs и {property}{sides}-{breakpoint}-{size} для sm, md, lg, xl и xxl.

Где свойство - одно из:

• m - для классов, которые устанавливают margin
• p - для классов, которые устанавливают padding

Где стороны - одна из:

• t - для классов, которые устанавливают margin-top или padding-top
• b - для классов, которые устанавливают margin-bottom или padding-bottom
• s - (start) для классов, которые устанавливают margin-left или padding-left в LTR, margin-right или padding-right в RTL
• e - (end) для классов, которые устанавливают margin-right или padding-right в LTR, margin-left или padding-left в RTL
• x - для классов, которые устанавливают оба *-left и *-right
• y - для классов, которые устанавливают оба *-top и *-bottom
• blank - для классов, которые устанавливают a margin или padding со всех 4 сторон элемента

Где размер - один из:

• 0 - или классы, устраняющие margin или padding установив его на 0
• 1 - (по умолчанию) для классов, которые устанавливают the margin или padding равным $spacer * .25
• 2 - (по умолчанию) для классов, которые устанавливают the margin или padding равным $spacer * .5
• 3 - (по умолчанию) для классов, которые устанавливают the margin или padding равным $spacer
• 4 - (по умолчанию) для классов, которые устанавливают the margin или padding равным $spacer * 1.5
• 5 - (по умолчанию) для классов, которые устанавливают the margin или padding равным $spacer * 3
• auto - для классов, которые устанавливают margin равным авто

(Вы можете добавить другие размеры, добавив записи в переменную Sass map $spacers.)

Примеры

Вот несколько типичных примеров этих классов:

.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;}

Горизонтальное центрирование

Кроме того, Bootstrap также включает класс .mx-auto для горизонтального центрирования содержимого уровня блока фиксированной ширины, то есть содержимого, имеющего набор display: block и width, путем установки горизонтальных полей на auto.

<divclass="mx-auto p-2"style="width: 200px;"> Центрированный элемент
</div>

Отрицательные отступы

В CSS свойства margin могут использовать отрицательные значения (padding не может). Эти отрицательные поля отключены по умолчанию, но могут быть включены в Sass, установив $enable-negative-margins: true.

Синтаксис почти такой же, как у утилит с положительным значением поля по умолчанию, но с добавлением n перед запрошенным размером. Вот пример класса, противоположного .mt-1:

.mt-n1{margin-top:-0.25rem!important;}

Разрыв

При использовании display: grid или display: flex, вы можете использовать утилиты gap для родительского элемента. Это может сэкономить на необходимости добавлять утилиты маржи к отдельным дочерним элементам сетки или гибкого контейнера. Утилиты Gap по умолчанию реагируют и генерируются с помощью нашего API утилит на основе карты Sass $spacers.

<divclass="grid gap-3"><divclass="p-2 g-col-6">Grid item 1</div><divclass="p-2 g-col-6">Grid item 2</div><divclass="p-2 g-col-6">Grid item 3</div><divclass="p-2 g-col-6">Grid item 4</div></div>

Поддержка включает в себя адаптивные параметры для всех контрольных точек сетки Bootstrap, а также шесть размеров из карты $spacers (0–5). Не существует класса утилиты .gap-auto, поскольку он фактически совпадает с .gap-0.

row-gap

row-gap устанавливает расстояние по вертикали между дочерними элементами в указанном контейнере.

<divclass="grid gap-0 row-gap-3"><divclass="p-2 g-col-6">Grid item 1</div><divclass="p-2 g-col-6">Grid item 2</div><divclass="p-2 g-col-6">Grid item 3</div><divclass="p-2 g-col-6">Grid item 4</div></div>

column-gap

column-gap устанавливает горизонтальное расстояние между дочерними элементами в указанном контейнере.

<divclass="grid gap-0 column-gap-3"><divclass="p-2 g-col-6">Grid item 1</div><divclass="p-2 g-col-6">Grid item 2</div><divclass="p-2 g-col-6">Grid item 3</div><divclass="p-2 g-col-6">Grid item 4</div></div>

CSS

Sass карты

Утилиты Spacing объявляются через карту Sass, а затем генерируются с помощью нашего API утилит.

$spacer:1rem;$spacers:(0:0,1:$spacer*.25,2:$spacer*.5,3:$spacer,4:$spacer*1.5,5:$spacer*3,);

Sass API утилиты

Утилиты интервалов объявлены в нашем API утилит в scss/_utilities.scss. Узнайте, как использовать API утилит.

"margin":(responsive:true,property:margin,class:m,values:map-merge($spacers,(auto:auto))),"margin-x":(responsive:true,property:margin-rightmargin-left,class:mx,values:map-merge($spacers,(auto:auto))),"margin-y":(responsive:true,property:margin-topmargin-bottom,class:my,values:map-merge($spacers,(auto:auto))),"margin-top":(responsive:true,property:margin-top,class:mt,values:map-merge($spacers,(auto:auto))),"margin-end":(responsive:true,property:margin-right,class:me,values:map-merge($spacers,(auto:auto))),"margin-bottom":(responsive:true,property:margin-bottom,class:mb,values:map-merge($spacers,(auto:auto))),"margin-start":(responsive:true,property:margin-left,class:ms,values:map-merge($spacers,(auto:auto))),//Negativemarginutilities"negative-margin":(responsive:true,property:margin,class:m,values:$negative-spacers),"negative-margin-x":(responsive:true,property:margin-rightmargin-left,class:mx,values:$negative-spacers),"negative-margin-y":(responsive:true,property:margin-topmargin-bottom,class:my,values:$negative-spacers),"negative-margin-top":(responsive:true,property:margin-top,class:mt,values:$negative-spacers),"negative-margin-end":(responsive:true,property:margin-right,class:me,values:$negative-spacers),"negative-margin-bottom":(responsive:true,property:margin-bottom,class:mb,values:$negative-spacers),"negative-margin-start":(responsive:true,property:margin-left,class:ms,values:$negative-spacers),//Paddingutilities"padding":(responsive:true,property:padding,class:p,values:$spacers),"padding-x":(responsive:true,property:padding-rightpadding-left,class:px,values:$spacers),"padding-y":(responsive:true,property:padding-toppadding-bottom,class:py,values:$spacers),"padding-top":(responsive:true,property:padding-top,class:pt,values:$spacers),"padding-end":(responsive:true,property:padding-right,class:pe,values:$spacers),"padding-bottom":(responsive:true,property:padding-bottom,class:pb,values:$spacers),"padding-start":(responsive:true,property:padding-left,class:ps,values:$spacers),//Gaputility"gap":(responsive:true,property:gap,class:gap,values:$spacers),"row-gap":(responsive:true,property:row-gap,class:row-gap,values:$spacers),"column-gap":(responsive:true,property:column-gap,class:column-gap,values:$spacers),