Espas

Bootstrap gen ladann yon pakèt klas itilite stenografi ak padding pou modifye aparans yon eleman.

Ki jan li fonksyone

Bay yon eleman ki zanmitay repons marginoswa paddingvalè pou yon eleman oswa yon sou-ansanm kote li yo ak klas kout. Gen ladan sipò pou pwopriyete endividyèl, tout pwopriyete, ak pwopriyete vètikal ak orizontal. Klas yo bati apati de yon kat Sass default ki soti nan .25remjiska 3rem.

Notasyon

Espas sèvis piblik ki aplike nan tout pwen rupture, soti nan xsrive xl, pa gen okenn abrevyasyon pwen rupture ladan yo. Sa a se paske klas sa yo aplike soti nan min-width: 0ak moute, epi konsa yo pa mare pa yon rechèch medya. Rès pwen yo, sepandan, gen ladan yon abrevyasyon breakpoint.

Yo bay non klas yo lè l sèvi avèk fòma {property}{sides}-{size}pou xsak {property}{sides}-{breakpoint}-{size}pou sm, md, lg, ak xl.

Kote pwopriyete se youn nan:

m- pou klas ki metemargin
p- pou klas ki metepadding

Ki kote kote yo se youn nan:

t- pou klas ki mete margin-toposwapadding-top
b- pou klas ki mete margin-bottomoswapadding-bottom
l- pou klas ki mete margin-leftoswapadding-left
r- pou klas ki mete margin-rightoswapadding-right
x- pou klas ki mete tou de *-leftak*-right
y- pou klas ki mete tou de *-topak*-bottom
vid - pou klas ki mete yon marginoswa paddingsou tout 4 kote eleman an

Ki kote gwosè se youn nan:

0- pou klas ki elimine a marginoswa paddingpa mete li nan0
1- (pa default) pou klas ki mete marginoswa paddingpou$spacer * .25
2- (pa default) pou klas ki mete marginoswa paddingpou$spacer * .5
3- (pa default) pou klas ki mete marginoswa paddingpou$spacer
4- (pa default) pou klas ki mete marginoswa paddingpou$spacer * 1.5
5- (pa default) pou klas ki mete marginoswa paddingpou$spacer * 3
auto- pou klas ki mete nan marginoto

(Ou ka ajoute plis gwosè lè w ajoute antre nan $spacersvaryab kat Sass la.)

Egzanp yo

Men kèk egzanp reprezantatif nan klas sa yo:

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

Santral orizontal

Anplis de sa, Bootstrap gen ladan tou yon .mx-autoklas pou santre orizontal kontni nivo blòk lajè fiks-sa vle di, kontni ki gen display: blockak yon widthseri-pa mete maj orizontal yo nan auto.

Eleman santre

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

Marge negatif

Nan CSS, marginpwopriyete yo ka itilize valè negatif ( paddingpa kapab). Apati 4.2, nou te ajoute sèvis piblik maj negatif pou chak gwosè non-zewo nonb antye ki nan lis pi wo a (egzanp, 1, 2, 3, 4, 5). Sèvis piblik sa yo ideyal pou pèsonalize goutyè kolòn kadriyaj atravè pwen rupture.

Sentaks la se prèske menm jan ak default, itilite maj pozitif, men ak adisyon a nan nanvan gwosè a mande. Men yon egzanp klas ki opoze a .mt-1:

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

Men yon egzanp pèsonalizasyon kadriyaj Bootstrap la nan pwen rupture mwayen ( md) ak pi wo a. Nou te ogmante .colpadding a ak .px-md-5Lè sa a, kontrekare sa ak .mx-md-n5sou paran an .row.

Custom kolòn padding

<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>