Kala dheeraynta
Bootstrap waxa ku jira tiro balaadhan oo ah margin ka jawaabida gacan gaaban iyo fasalada utility padding si wax looga beddelo muuqaalka shay.
Sida ay u shaqeyso
U qoondee saaxiibtinimo-saaxiibtinimo margin
ama padding
qiyamka shay ama qayb ka mid ah dhinacyadiisa oo leh fasalo gaaban. Waxaa ku jira taageerada guryaha gaarka ah, dhammaan guryaha, iyo kuwa toosan iyo kuwa jiifka ah. Fasallada waxaa laga dhisay khariidadda Sass ee caadiga ah oo u dhaxaysa .25rem
ilaa 3rem
.
Ogaysiis
Kala dheeraynta yutiilitida ee khuseeya dhammaan meelaha jabinta, laga bilaabo xs
ilaa xl
, kuma jiraan wax soo gaabin ah. Tani waa sababta oo ah fasalladaas waxaa laga dalbadaa min-width: 0
kor iyo kor, sidaas darteed kuma xirna su'aal warbaahineed. Dhibcaha soo haray, si kastaba ha ahaatee, waxaa ku jira soo gaabinta barta jabinta.
{property}{sides}-{size}
Fasallada waxaa lagu magacaabay qaabka xs
iyo {property}{sides}-{breakpoint}-{size}
, sm
, md
, lg
iyo xl
.
Halka hantidu ka mid tahay:
m
- fasallada dhigaymargin
p
- fasallada dhigaypadding
Halka dhinacyadu ay ka mid yihiin:
t
- fasallada dhigaymargin-top
amapadding-top
b
- fasallada dhigaymargin-bottom
amapadding-bottom
l
- fasallada dhigaymargin-left
amapadding-left
r
- fasallada dhigaymargin-right
amapadding-right
x
- fasallada dhigay labada*-left
iyo*-right
y
- fasallada dhigay labada*-top
iyo*-bottom
- maran - fasallada dhigay a
margin
amapadding
dhammaan 4 dhinac ee curiyaha
Halka cabbirku yahay mid ka mid ah:
0
- fasallada meesha ka saarayamargin
amapadding
dejinaya0
1
- (sida caadiga ah) ee fasallada dejiyamargin
amapadding
ku dhejiya$spacer * .25
2
- (sida caadiga ah) ee fasallada dejiyamargin
amapadding
ku dhejiya$spacer * .5
3
- (sida caadiga ah) ee fasallada dejiyamargin
amapadding
ku dhejiya$spacer
4
- (sida caadiga ah) ee fasallada dejiyamargin
amapadding
ku dhejiya$spacer * 1.5
5
- (sida caadiga ah) ee fasallada dejiyamargin
amapadding
ku dhejiya$spacer * 3
auto
- fasallada u dejinayamargin
auto
(Waxaad ku dari kartaa cabbirro badan adiga oo ku daraya gelinta $spacers
doorsoomiyaha khariidada Sass.)
Tusaalooyinka
Waa kuwan qaar ka mid ah tusaalayaal matala fasalladan:
.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;
}
Dhexdhexaadinta
Intaa waxa dheer, Bootstrap waxa kale oo ka mid ah .mx-auto
fasal si toos ah u dhexeya nuxurka heerka balac ballaca go'an - taas oo ah, waxa ka kooban display: block
iyo width
go'an-adiga oo dejinaya soohdimaha toosan auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Margin xun
CSS gudaheeda, margin
guryaha waxay isticmaali karaan qiimayaal taban ( padding
ma karaan). Marka la eego 4.2, waxaanu ku darnay utility margin negative ee cabbir kasta oo aan eber ahayn ee kor ku taxan (tusaale, 1
, 2
, 3
, 4
, 5
). Tasiilaadkani waxay ku fiican yihiin in la habeeyo majaraha tiirarka tubbada ee meelaha jaban.
Syntax-ku wuxuu ku dhow yahay inuu la mid yahay kan caadiga ah, yutiilitiyada margin togan, laakiin marka lagu daro ka n
hor cabbirka la codsaday. Waa kan tusaale tusaale ka soo horjeeda .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Waa kuwan tusaale ku saabsan habaynta shabakada Bootstrap ee barta md
goynta dhexe iyo ka sare. Waxaan ku kordhinay .col
suufka .px-md-5
ka dibna ka hortagnay taas .mx-md-n5
waalidka .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>