Размак

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

Како то ради

Доделите прилагођене 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>

Негативна маргина

У ЦСС-у, marginсвојства могу да користе негативне вредности ( paddingне могу). Од верзије 4.2, додали смо негативне маргине за сваку величину која није нула наведену горе (нпр. 1, 2, 3, 4, 5). Ови услужни програми су идеални за прилагођавање олука стубова мреже преко тачака прекида.

Синтакса је скоро иста као подразумевани, позитивни услужни програми маргине, али са додатком nпре захтеване величине. Ево примера класе која је супротна од .mt-1:

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

Ево примера прилагођавања Боотстрап мреже на средњој ( md) тачки прекида и изнад. Повећали смо .colпаддинг са .px-md-5, а затим смо то супротставили са .mx-md-n5на родитељском .row.

Прилагођено пуњење колона

<div class="row mx-md-n5">
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
</div>