Source

Размак

Боотстрап укључује широк спектар услужних класа маргина које реагују на стенографију и допуне за модификовање изгледа елемента.

Како то ради

Доделите прилагођене marginили paddingвредности елементу или подскупу његових страна са скраћеним класама. Укључује подршку за појединачна својства, сва својства и вертикална и хоризонтална својства. Класе су изграђене од подразумеване Сасс мапе у распону од .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
празно - за класе које постављају а 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на ауто

(Можете додати више величина додавањем уноса у $spacersпроменљиву мапе Сасс.)

Примери

Ево неколико репрезентативних примера ових класа:

.mt-0 {
  margin-top: 0 !important;
}

.ml-1 {
  margin-left: ($spacer * .25) !important;
}

.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}

.p-3 {
  padding: $spacer !important;
}

Хоризонтално центрирање

Поред тога, Боотстрап такође укључује .mx-autoкласу за хоризонтално центрирање садржаја на нивоу блока фиксне ширине – то јест, садржаја који има display: blockи widthскуп – постављањем хоризонталних маргина на auto.

Центрирани елемент

<div class="mx-auto" style="width: 200px;">
  Centered element
</div>