Размак
Боотстрап укључује широк спектар услужних класа маргина које реагују на стенографију и допуне за модификовање изгледа елемента.
Како то ради
Доделите прилагођене 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>