Sib nrug
Bootstrap suav nrog ntau yam ntawm cov lus teb luv luv thiab cov chav kawm siv hluav taws xob padding los hloov kho lub ntsiab lus.
Nws ua haujlwm li cas
Muab cov lus teb rau cov phooj ywg margin
lossis cov padding
txiaj ntsig rau ib lub ntsiab lus lossis ib qho ntawm nws sab nrog cov chav kawm luv. Xws li kev txhawb nqa rau cov khoom ntiag tug, txhua yam khoom, thiab cov khoom ntsug thiab kab rov tav. Cov chav kawm yog tsim los ntawm lub neej ntawd Sass daim ntawv qhia xws li .25rem
mus rau 3rem
.
Lus cim
Cov khoom siv sib cais uas siv rau txhua qhov kev sib cais, los ntawm xs
mus rau xl
, tsis muaj qhov luv luv ntawm lawv. Qhov no yog vim tias cov chav kawm no tau siv los ntawm min-width: 0
thiab nce, thiab yog li tsis muaj kev cuam tshuam los ntawm kev nug xov xwm. Cov seem breakpoints, txawm li cas los xij, suav nrog cov luv luv breakpoint.
Cov chav kawm muaj npe siv hom ntawv {property}{sides}-{size}
rau xs
thiab {property}{sides}-{breakpoint}-{size}
rau sm
, md
, lg
, thiab xl
.
Qhov twg khoom yog ib qho ntawm:
m
- rau cov chav kawm uas teemmargin
p
- rau cov chav kawm uas teempadding
Qhov twg sab yog ib qho ntawm:
t
- rau cov chav kawm uas teemmargin-top
los yogpadding-top
b
- rau cov chav kawm uas teemmargin-bottom
los yogpadding-bottom
l
- rau cov chav kawm uas teemmargin-left
los yogpadding-left
r
- rau cov chav kawm uas teemmargin-right
los yogpadding-right
x
- rau cov chav kawm uas teem ob qho tib si*-left
thiab*-right
y
- rau cov chav kawm uas teem ob qho tib si*-top
thiab*-bottom
- dawb paug - rau cov chav kawm uas teem ib
margin
los yogpadding
tag nrho 4 sab ntawm lub caij
Qhov loj me yog ib qho ntawm:
0
- rau cov chav kawm uas tshem tawmmargin
lossispadding
los ntawm kev teeb tsa0
1
- (los ntawm lub neej ntawd) rau cov chav kawm uas teeb tsamargin
lossispadding
rau$spacer * .25
2
- (los ntawm lub neej ntawd) rau cov chav kawm uas teeb tsamargin
lossispadding
rau$spacer * .5
3
- (los ntawm lub neej ntawd) rau cov chav kawm uas teeb tsamargin
lossispadding
rau$spacer
4
- (los ntawm lub neej ntawd) rau cov chav kawm uas teeb tsamargin
lossispadding
rau$spacer * 1.5
5
- (los ntawm lub neej ntawd) rau cov chav kawm uas teeb tsamargin
lossispadding
rau$spacer * 3
auto
- rau cov chav kawm uas teemmargin
rau auto
(Koj tuaj yeem ntxiv qhov ntau thiab tsawg los ntawm kev ntxiv nkag rau $spacers
Sass daim ntawv qhia hloov pauv.)
Piv txwv
Nov yog qee qhov piv txwv ntawm cov chav kawm no:
.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;
}
Kab rov tav centering
Tsis tas li ntawd, Bootstrap tseem suav nrog cov .mx-auto
chav kawm rau kab rov tav nruab nrab qhov dav-dav thaiv cov ntsiab lus - uas yog, cov ntsiab lus uas muaj display: block
thiab width
teeb tsa - los ntawm kev teeb tsa cov kab rov tav rau auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Negative margin
Hauv CSS, margin
cov khoom siv tuaj yeem siv cov txiaj ntsig tsis zoo ( padding
tsis tuaj yeem). Raws li ntawm 4.2, peb tau ntxiv cov khoom siv tsis zoo rau txhua qhov tsis muaj pes tsawg tus lej teev saum toj no (piv txwv li, 1
, 2
, , 3
, 4
, 5
). Cov khoom siv hluav taws xob no yog qhov zoo tshaj plaws rau kev kho cov kab ke kab gutters hla cov ntsiab lus tawg.
Cov syntax yuav luag zoo ib yam li lub neej ntawd, cov txiaj ntsig zoo, tab sis nrog qhov sib ntxiv ntawm n
ua ntej qhov kev thov loj. Ntawm no yog ib qho piv txwv chav kawm uas yog qhov opposite ntawm .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Nov yog ib qho piv txwv ntawm kev kho cov kab sib chaws Bootstrap ntawm qhov nruab nrab ( md
) breakpoint thiab saum toj no. Peb tau nce lub .col
padding nrog .px-md-5
thiab tom qab ntawd counteracted nrog .mx-md-n5
rau ntawm niam txiv .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>