Source

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>