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 margin
of padding
waardes 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 .25rem
tot 3rem
.
Notasie
Spasiëringnutsprogramme wat op alle breekpunte van toepassing is, van xs
tot xl
, het geen breekpunt-afkorting in nie. Dit is omdat daardie klasse van min-width: 0
en 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 xs
en {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 stelmargin-top
ofpadding-top
b
- vir klasse wat stelmargin-bottom
ofpadding-bottom
l
- vir klasse wat stelmargin-left
ofpadding-left
r
- vir klasse wat stelmargin-right
ofpadding-right
x
- vir klasse wat beide*-left
en stel*-right
y
- vir klasse wat beide*-top
en stel*-bottom
- leeg - vir klasse wat 'n
margin
ofpadding
aan al 4 kante van die element stel
Waar grootte een van is:
0
margin
- vir klasse wat die of uitskakelpadding
deur dit op te stel0
1
- (by verstek) vir klasse wat diemargin
ofpadding
stel$spacer * .25
2
- (by verstek) vir klasse wat diemargin
ofpadding
stel$spacer * .5
3
- (by verstek) vir klasse wat diemargin
ofpadding
stel$spacer
4
- (by verstek) vir klasse wat diemargin
ofpadding
stel$spacer * 1.5
5
- (by verstek) vir klasse wat diemargin
ofpadding
stel$spacer * 3
auto
- vir klasse wat diemargin
op outomaties stel
(Jy kan meer groottes byvoeg deur inskrywings by die $spacers
Sass-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-auto
klas vir die horisontale sentrering van vaste-wydte blokvlak-inhoud - dit wil sê inhoud wat ' display: block
n width
stel het - deur die horisontale kantlyne op te stel auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Negatiewe marge
In CSS kan margin
eiendomme negatiewe waardes gebruik ( padding
kan 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 n
voor 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 .col
vulling verhoog met .px-md-5
en dit dan teengewerk met .mx-md-n5
op die ouer .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>