Spasiëring

Bootstrap bevat 'n wye reeks snelskrif-responsiewe marge- en opvulling-nutsklasse om 'n element se voorkoms te verander.

Hoe dit werk

Ken responsvriendelike marginof paddingwaardes toe aan 'n element of 'n subset van sy kante met snelskrifklasse. Sluit ondersteuning vir individuele eiendomme, alle eiendomme en vertikale en horisontale eiendomme in. Klasse word gebou vanaf 'n verstek Sass-kaart wat wissel van .25remtot 3rem.

Notasie

Spasiëringnutsprogramme wat op alle breekpunte van toepassing is, van xstot xl, het geen breekpunt-afkorting in nie. Dit is omdat daardie klasse van min-width: 0en op toegepas word, en dus nie deur 'n medianavraag gebind word nie. Die oorblywende breekpunte bevat egter 'n breekpuntafkorting.

Die klasse word benoem deur gebruik te maak van die formaat {property}{sides}-{size}vir xsen {property}{sides}-{breakpoint}-{size}vir sm, md, lg, en xl.

Waar eiendom een van:

m- vir klasse wat stelmargin
p- vir klasse wat stelpadding

Waar sye een van is:

t- vir klasse wat stel margin-topofpadding-top
b- vir klasse wat stel margin-bottomofpadding-bottom
l- vir klasse wat stel margin-leftofpadding-left
r- vir klasse wat stel margin-rightofpadding-right
x- vir klasse wat beide *-leften stel*-right
y- vir klasse wat beide *-topen stel*-bottom
leeg - vir klasse wat 'n marginof paddingaan al 4 kante van die element stel

Waar grootte een van is:

0margin- vir klasse wat die of uitskakel paddingdeur dit op te stel0
1- (by verstek) vir klasse wat die marginof paddingstel$spacer * .25
2- (by verstek) vir klasse wat die marginof paddingstel$spacer * .5
3- (by verstek) vir klasse wat die marginof paddingstel$spacer
4- (by verstek) vir klasse wat die marginof paddingstel$spacer * 1.5
5- (by verstek) vir klasse wat die marginof paddingstel$spacer * 3
auto- vir klasse wat die marginop outomaties stel

(Jy kan meer groottes byvoeg deur inskrywings by die $spacersSass-kaartveranderlike by te voeg.)

Voorbeelde

Hier is 'n paar verteenwoordigende voorbeelde van hierdie klasse:

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

Horisontale sentrering

Boonop bevat Bootstrap ook 'n .mx-autoklas vir die horisontale sentrering van vaste-wydte blokvlak-inhoud - dit wil sê inhoud wat ' display: blockn widthstel het - deur die horisontale kantlyne op te stel auto.

Gesentreerde element

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

Negatiewe marge

In CSS kan margineiendomme negatiewe waardes gebruik ( paddingkan nie). Vanaf 4.2 het ons negatiewe marge-hulpmiddels bygevoeg vir elke nie-nul heelgetalgrootte hierbo gelys (bv. 1, 2, 3, 4, 5). Hierdie hulpmiddels is ideaal om roosterkolomgeute oor breekpunte aan te pas.

Die sintaksis is amper dieselfde as die verstek, positiewe marge-hulpmiddels, maar met die toevoeging van nvoor die gevraagde grootte. Hier is 'n voorbeeldklas wat die teenoorgestelde is van .mt-1:

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

Hier is 'n voorbeeld van die aanpassing van die Bootstrap-rooster by die medium ( md) breekpunt en hoër. Ons het die .colvulling verhoog met .px-md-5en dit dan teengewerk met .mx-md-n5op die ouer .row.

Pasgemaakte kolomvulling

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