Medzery

Bootstrap obsahuje širokú škálu rýchlopisne reagujúcich okrajov a pomocných tried výplne na úpravu vzhľadu prvku.

Ako to funguje

Priraďte k prvku alebo podmnožine jeho strán pomocou tried skratiek responzívny prístup marginalebo hodnoty. paddingZahŕňa podporu pre jednotlivé vlastnosti, všetky vlastnosti a vertikálne a horizontálne vlastnosti. Triedy sú zostavené z predvolenej mapy Sass v rozsahu od .25remdo 3rem.

Notový zápis

Pomôcky na vytváranie medzier, ktoré sa vzťahujú na všetky body prerušenia, od xsdo xlnemajú v sebe žiadnu skratku bodu prerušenia. Je to preto, že tieto triedy sú aplikované od min-width: 0a vyššie, a teda nie sú viazané dopytom na médiá. Zostávajúce body prerušenia však obsahujú skratku bodu prerušenia.

Triedy sú pomenované pomocou formátu {property}{sides}-{size}pre xsa {property}{sides}-{breakpoint}-{size}pre sm, md, lga xl.

Ak je nehnuteľnosť jednou z:

m- pre triedy, ktoré nastavujúmargin
p- pre triedy, ktoré nastavujúpadding

Kde strany sú jednou z:

t- pre triedy, ktoré stanovujú margin-topresppadding-top
b- pre triedy, ktoré stanovujú margin-bottomresppadding-bottom
l- pre triedy, ktoré stanovujú margin-leftresppadding-left
r- pre triedy, ktoré stanovujú margin-rightresppadding-right
x- pre triedy, ktoré nastavujú *-leftaj*-right
y- pre triedy, ktoré nastavujú *-topaj*-bottom
prázdne - pre triedy, ktoré nastavujú a marginalebo paddingna všetkých 4 stranách prvku

Kde veľkosť je jedna z:

0- pre triedy, ktoré eliminujú marginalebo paddingnastavením na0
1- (predvolene) pre triedy, ktoré nastavujú marginalebopadding$spacer * .25
2- (predvolene) pre triedy, ktoré nastavujú marginalebopadding$spacer * .5
3- (predvolene) pre triedy, ktoré nastavujú marginalebopadding$spacer
4- (predvolene) pre triedy, ktoré nastavujú marginalebopadding$spacer * 1.5
5- (predvolene) pre triedy, ktoré nastavujú marginalebopadding$spacer * 3
auto- pre triedy, ktoré nastavujú marginna auto

(Viac veľkostí môžete pridať pridaním položiek do $spacerspremennej mapy Sass.)

Príklady

Tu je niekoľko reprezentatívnych príkladov týchto tried:

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

Horizontálne centrovanie

Bootstrap navyše obsahuje aj .mx-autotriedu na horizontálne centrovanie obsahu na úrovni bloku s pevnou šírkou – teda obsahu, ktorý má display: blocka widthmnožinu – nastavením horizontálnych okrajov na auto.

Vycentrovaný prvok

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

Záporná marža

V CSS môžu marginvlastnosti využívať záporné hodnoty ( paddingnemôže). Od verzie 4.2 sme pridali pomocné nástroje so zápornou maržou pre každú nenulovú veľkosť celého čísla uvedenú vyššie (napr. , , 1, 2, 3) . Tieto nástroje sú ideálne na prispôsobenie žľabov mriežkových stĺpov naprieč bodmi prerušenia.45

Syntax je takmer rovnaká ako predvolené nástroje s kladnou maržou, ale s pridaním npred požadovanú veľkosť. Tu je príklad triedy, ktorá je opakom .mt-1:

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

Tu je príklad prispôsobenia mriežky Bootstrap na strednom ( md) bode prerušenia a vyššie. Zvýšili sme .colvýplň pomocou .px-md-5a potom sme tomu zabránili pomocou .mx-md-n5nadradenej položky .row.

Vlastné odsadenie stĺpcov

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