Spacing
Bootstrap inosanganisira huwandu hwakasiyana hweshorthand inopindura margin uye padding utility makirasi kugadzirisa chitarisiko chechinhu.
Zvinoshanda sei
Ipa inopindura-inoshamwaridzika margin
kana padding
kukosha kune chinhu kana subset yemativi ayo ane shorthand makirasi. Inosanganisira tsigiro yezvivakwa zvega, zvese zvivakwa, uye zvakamira uye zvakachinjika zvivakwa. Makirasi anovakwa kubva kune yakasarudzika mepu yeSass kubva .25rem
pa 3rem
.
Notation
Spacing utilities anoshanda kune ese mabreakpoints, kubva xs
kusvika kune xl
, haana breakpoint chidimbu mazviri. Izvi zvinodaro nekuti iwo makirasi anoiswa kubva min-width: 0
nekukwira, uye nekudaro haana kusungwa nemubvunzo wenhau. Iwo asara mabreakpoints, zvisinei, anosanganisira chidimbu chebreakpoint.
Makirasi anopihwa mazita pachishandiswa manyorerwo {property}{sides}-{size}
ekuti xs
uye {property}{sides}-{breakpoint}-{size}
, sm
, md
, lg
uye xl
.
Ipo pfuma iri imwe ye:
m
- kumakirasi anogadzikamargin
p
- kumakirasi anogadzikapadding
Iko mativi ndeimwe ye:
t
- kumakirasi anoisamargin-top
kanapadding-top
b
- kumakirasi anoisamargin-bottom
kanapadding-bottom
l
- kumakirasi anoisamargin-left
kanapadding-left
r
- kumakirasi anoisamargin-right
kanapadding-right
x
- kumakirasi anoisa zvese*-left
uye*-right
y
- kumakirasi anoisa zvese*-top
uye*-bottom
- blank - yemakirasi anoisa
margin
kanapadding
pamativi mana echinhu
Uko saizi imwe ye:
0
- kumakirasi anobvisa iyomargin
kanapadding
nekuiisa kwairi0
1
- (nekusarudzika) kumakirasi anosetamargin
kanapadding
ku$spacer * .25
2
- (nekusarudzika) kumakirasi anosetamargin
kanapadding
ku$spacer * .5
3
- (nekusarudzika) kumakirasi anosetamargin
kanapadding
ku$spacer
4
- (nekusarudzika) kumakirasi anosetamargin
kanapadding
ku$spacer * 1.5
5
- (nekusarudzika) kumakirasi anosetamargin
kanapadding
ku$spacer * 3
auto
- kumakirasi anoisa iyomargin
otomatiki
(Unogona kuwedzera mamwe saizi nekuwedzera zvinyorwa kune iyo $spacers
Sass mepu inosiyana.)
Mienzaniso
Heano mimwe mienzaniso inomiririra yemakirasi aya:
.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;
}
Horizontal centering
Pamusoro pezvo, Bootstrap inosanganisirawo .mx-auto
kirasi yekudzikamisa-yakafara nhanho yemukati yemukati-kureva, zvirimo zvine display: block
uye width
seti-nekuisa yakachinjika miganho ku auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Negative margin
MuCSS, margin
zvivakwa zvinogona kushandisa maitiro asina kunaka ( padding
haagone). Kubva pa4.2, tawedzera magineti ekushandisa kune ese asiri-zero saizi yakanyorwa pamusoro (semuenzaniso, 1
, 2
, 3
, 4
, 5
). Izvi zvinoshandiswa zvakanakira kugadzirisa grid column gutters pamabreakpoints.
Iyo syntax yakada kufanana neyekutanga, yakanaka margin zvishandiso, asi nekuwedzera n
kwesati yakumbirwa saizi. Heino muenzaniso kirasi inopesana ne .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Heino muenzaniso wekugadzirisa iyo Bootstrap grid panguva yepakati ( md
) breakpoint uye pamusoro. Takawedzera .col
padding nayo tichibva tapesana .px-md-5
nazvo .mx-md-n5
pamubereki .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>