Spásáil
Áirítear le Bootstrap raon leathan ranganna áirgiúlachta sofhreagrach corrlaigh agus stuála chun cuma eiliminte a mhodhnú.
Conas a oibríonn sé
Sann luachanna atá sofhreagrach-chairdiúil d'eilimint nó d'fhothacar dá thaobh le haicmí gearrscríbhneoireachta margin
. padding
Áirítear leis tacaíocht d’airíonna aonair, gach maoin, agus airíonna ingearacha agus cothrománacha. Tógtar na ranganna ó léarscáil Sass réamhshocraithe .25rem
ó 3rem
.
Nodaireacht
Níl aon ghiorrúchán brisphointe iontu ag fóntais spáis a bhaineann le gach bristephointe, ó xs
go ,. xl
Tá sé seo amhlaidh toisc go gcuirtear na ranganna sin i bhfeidhm ó min-width: 0
agus suas, agus mar sin níl siad faoi cheangal ag ceist mheáin. Áiríonn na brisphointí atá fágtha, áfach, giorrúchán brisphointe.
Ainmnítear na ranganna ag baint úsáide as an bhformáid {property}{sides}-{size}
le haghaidh xs
agus {property}{sides}-{breakpoint}-{size}
le haghaidh sm
, md
, lg
, agus xl
.
Sa chás gur ceann de na nithe seo a leanas an mhaoin :
m
- le haghaidh ranganna a leagannmargin
p
- le haghaidh ranganna a leagannpadding
Áit a bhfuil taobhanna ar cheann de:
t
- le haghaidh ranganna a leagannmargin-top
nópadding-top
b
- le haghaidh ranganna a leagannmargin-bottom
nópadding-bottom
l
- le haghaidh ranganna a leagannmargin-left
nópadding-left
r
- le haghaidh ranganna a leagannmargin-right
nópadding-right
x
- le haghaidh ranganna a leagann an dá*-left
agus*-right
y
- le haghaidh ranganna a leagann an dá*-top
agus*-bottom
- bán - le haghaidh ranganna a leagann síos
margin
nópadding
ar gach 4 thaobh den eilimint
Áit a bhfuil méid mar cheann de:
0
- le haghaidh ranganna a chuireann deireadh leis anmargin
nópadding
trína shocrú go0
1
- (de réir réamhshocraithe) le haghaidh aicmí a shocraíonn anmargin
nópadding
go$spacer * .25
2
- (de réir réamhshocraithe) le haghaidh aicmí a shocraíonn anmargin
nópadding
go$spacer * .5
3
- (de réir réamhshocraithe) le haghaidh aicmí a shocraíonn anmargin
nópadding
go$spacer
4
- (de réir réamhshocraithe) le haghaidh aicmí a shocraíonn anmargin
nópadding
go$spacer * 1.5
5
- (de réir réamhshocraithe) le haghaidh aicmí a shocraíonn anmargin
nópadding
go$spacer * 3
auto
- le haghaidh ranganna a shocraíonn an tmargin
-uathoibríoch
(Is féidir leat níos mó méideanna a chur leis trí iontrálacha a chur leis an $spacers
athróg léarscáil Sass.)
Samplaí
Seo roinnt samplaí ionadaíocha de na ranganna seo:
.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;
}
Lárú cothrománach
Ina theannta sin, cuimsíonn Bootstrap .mx-auto
aicme freisin chun inneachar leibhéal bloc leithead seasta a dhíriú go cothrománach - is é sin, ábhar a bhfuil display: block
agus width
tacar aige - trí na himill chothrománacha a shocrú go auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Corrlach diúltach
I CSS, margin
is féidir le hairíonna luachanna diúltacha a úsáid ( padding
ní féidir). Ó 4.2, tá fóntais corrlaigh diúltacha curtha againn le haghaidh gach slánuimhir neamh-nialais atá liostaithe thuas (m.sh., 1
, 2
, , 3
, 4
, 5
). Tá na fóntais seo oiriúnach chun gáitéir cholúin ghreille a shaincheapadh thar phointí briste.
Tá an chomhréir beagnach mar an gcéanna leis na fóntais réamhshocraithe corrlaigh dhearfacha, ach n
sula gcuirtear an méid a iarrtar leis. Seo rang samplach a mhalairt de .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Seo sampla den ghreille Bootstrap a shaincheapadh ag an md
brisphointe meán ( ) agus os a chionn. Táimid tar éis an .col
stuáil a mhéadú .px-md-5
agus ansin frithghníomhú leis sin .mx-md-n5
ar an tuismitheoir .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>