Panagsisina
Ti Bootstrap ket mangiraman ti nasaknap a sakop ti shorthand a sumungbat a margin ken dagiti klase ti utilidad ti padding tapno baliwan ti langa ti maysa nga elemento.
No kasano ti panagandar dayta
Ituding dagiti responsive-friendly margin
wenno padding
dagiti pateg iti maysa nga elemento wenno ti subgrupo dagiti sikiganna nga addaan kadagiti klase ti shorthand. Iramanna ti suporta para kadagiti indibidual a tagikua, amin a tagikua, ken dagiti bertikal ken horisontal a tagikua. Dagiti klase ket naibangon manipud iti default a mapa ti Sass manipud iti .25rem
aginggana iti 3rem
.
Notasion
Dagiti utilidad ti panagsisina a maipakat kadagiti amin a puntos ti panagburak, manipud iti xs
aginggana xl
, ket awan ti pannakapaababa ti puntos ti panagsina kadagitoy. Daytoy ket gapu ta dagitoy a klase ket maipakat manipud min-width: 0
ken agpangato, ken iti kasta ket saan a naisinggalut babaen ti maysa a panagsaludsod ti media. Dagiti nabati a breakpoint, nupay kasta, ket talaga a mangiraman ti maysa nga ababa a breakpoint.
Dagiti klase ket nainaganan babaen ti panagusar ti pormat {property}{sides}-{size}
para xs
ken {property}{sides}-{breakpoint}-{size}
para iti sm
, md
, lg
, ken xl
.
No sadino a ti sanikua ket maysa kadagiti:
m
- para kadagiti klase nga agsetmargin
p
- para kadagiti klase nga agsetpadding
Sadino ti sides ket maysa kadagiti:
t
- para kadagiti klase a mangikeddengmargin-top
wennopadding-top
b
- para kadagiti klase a mangikeddengmargin-bottom
wennopadding-bottom
l
- para kadagiti klase a mangikeddengmargin-left
wennopadding-left
r
- para kadagiti klase a mangikeddengmargin-right
wennopadding-right
x
- para kadagiti klase a mangikeddeng nga agpada*-left
ken*-right
y
- para kadagiti klase a mangikeddeng nga agpada*-top
ken*-bottom
- blangko - para kadagiti klase a mangikeddeng ti maysa
margin
wennopadding
iti amin nga 4 a sikigan ti elemento
Saan a ti kadakkel ket maysa kadagiti:
0
- para kadagiti klase a mangikkat itimargin
wennopadding
babaen ti panangisaad iti dayta iti0
1
- (babaen ti default) para kadagiti klase a mangikeddeng timargin
wennopadding
iti$spacer * .25
2
- (babaen ti default) para kadagiti klase a mangikeddeng timargin
wennopadding
iti$spacer * .5
3
- (babaen ti default) para kadagiti klase a mangikeddeng timargin
wennopadding
iti$spacer
4
- (babaen ti default) para kadagiti klase a mangikeddeng timargin
wennopadding
iti$spacer * 1.5
5
- (babaen ti default) para kadagiti klase a mangikeddeng timargin
wennopadding
iti$spacer * 3
auto
- para kadagiti klase a mangiset timargin
to auto
(Mabalinmo ti manginayon kadagiti ad-adu pay a kadakkel babaen ti pananginayon kadagiti panagserrek iti $spacers
variable ti mapa ti Sass.)
Dagiti pagarigan
Adtoy dagiti sumagmamano a pannakabagi a pagarigan dagitoy a klase:
.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;
}
Paisaad a panagsentro
Iti pay maipatinayon, ti Bootstrap ket mangiraman pay ti maysa a .mx-auto
klase para iti horisontal a panagsentro ti naikeddeng-kalawa a linaon ti lebel ti bloke—kayatna a sawen, ti linaon nga addaan display: block
ken ti maysa a width
set—babaen ti panangisaad kadagiti horisontal a pingir iti auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Negatibo a margin
Iti CSS, margin
dagiti tagikua ket mabalinda nga usaren dagiti negatibo a pateg ( padding
saan). Manipud iti 4.2, innayonmi dagiti negatibo a margin a utilidad para iti tunggal maysa a saan a sero nga intero a bilang a nailista iti ngato (kas pagarigan, 1
, 2
, 3
, 4
, 5
). Dagitoy a utilidad ket nasayaat para iti panagpasayaat kadagiti grid column gutters iti ballasiw dagiti breakpoint.
Ti sintaksis ket gangani a kapada ti kasisigud, positibo a margin a utilidad, ngem addaan ti pannakainayon ti n
sakbay ti kiniddaw a kadakkel. Adda ditoy ti pagarigan a klase a kasungani ti .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Adda ditoy ti pagarigan ti panangipasayaat ti grid ti Bootstrap iti medium ( md
) a breakpoint ken iti ngato. Napadakkelmi ti .col
padding nga addaan .px-md-5
ken kalpasanna kinontrami dayta nga addaan .mx-md-n5
iti nagannak .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>