Umwanya
Bootstrap ikubiyemo intera nini ya shorthand yitabira margin hamwe na padding yingirakamaro kugirango uhindure ikintu kigaragara.
Uburyo ikora
Shinga igisubizo-cyiza margin
cyangwa padding
indangagaciro kubintu cyangwa igice cyimpande zacyo hamwe namasomo magufi. Harimo inkunga kubintu byihariye, ibintu byose, hamwe na vertical na horizontal. Amasomo yubatswe kuva ikarita ya Sass isanzwe kuva .25rem
kuri 3rem
.
Icyitonderwa
Umwanya utanga ibikoresho bikoreshwa mubice byose, kuva xs
kuri xl
, nta magambo ahinnye muri byo. Ibi ni ukubera ko ayo masomo akoreshwa kuva min-width: 0
hejuru no hejuru, bityo ntagengwa nikibazo cyitangazamakuru. Ibice bisigaye, ariko, birimo amagambo ahinnye.
Amasomo yitiriwe ukoresheje imiterere {property}{sides}-{size}
ya xs
na {property}{sides}-{breakpoint}-{size}
,,, na sm
.md
lg
xl
Aho umutungo ari umwe muri:
m
- ku masomo yashizehomargin
p
- ku masomo yashizehopadding
Aho impande ari imwe muri:
t
- ku masomo ashyirahomargin-top
cyangwapadding-top
b
- ku masomo ashyirahomargin-bottom
cyangwapadding-bottom
l
- ku masomo ashyirahomargin-left
cyangwapadding-left
r
- ku masomo ashyirahomargin-right
cyangwapadding-right
x
- kumasomo ashyiraho byombi*-left
na*-right
y
- kumasomo ashyiraho byombi*-top
na*-bottom
- ubusa - kumasomo ashyiraho a
margin
cyangwapadding
kumpande 4 zose yibintu
Aho ingano ari imwe muri:
0
- kumasomo akurahomargin
cyangwa cyangwapadding
kuyashyiraho0
1
- (Mburabuzi) kumasomo ashyirahomargin
cyangwapadding
kuri$spacer * .25
2
- (Mburabuzi) kumasomo ashyirahomargin
cyangwapadding
kuri$spacer * .5
3
- (Mburabuzi) kumasomo ashyirahomargin
cyangwapadding
kuri$spacer
4
- (Mburabuzi) kumasomo ashyirahomargin
cyangwapadding
kuri$spacer * 1.5
5
- (Mburabuzi) kumasomo ashyirahomargin
cyangwapadding
kuri$spacer * 3
auto
- kumasomo ashyirahomargin
imodoka
(Urashobora kongeramo ubunini wongeyeho ibyanditswe kuri $spacers
Sass ikarita ihinduka.)
Ingero
Dore ingero zimwe zihagarariye aya masomo:
.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;
}
Gutambika kuri horizontal
Byongeye kandi, Bootstrap ikubiyemo kandi .mx-auto
icyiciro cyo gutambukiranya hagati yubugari bwagutse buringaniye-ni ukuvuga ibirimo bifite display: block
hamwe width
nugushiraho - mugushiraho impande zombi auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Inyungu mbi
Muri CSS, margin
imitungo irashobora gukoresha indangagaciro mbi ( padding
ntishobora). 1
Kuva kuri 4.2 , twongeyeho margin yingirakamaro kuri buri bunini butari zeru yuzuye hejuru ( urugero 2
,,,,, ) 3
. Izi nyungu ninziza zo gutandukanya grid inkingi yimyanda hejuru.4
5
Igishushanyo ni kimwe nkibisanzwe, byiza margin yingirakamaro, ariko hamwe ninyongera n
mbere yubunini bwasabwe. Dore urugero rwicyiciro gihabanye na .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Dore urugero rwo gutunganya Bootstrap grid kumurongo wo hagati ( md
) no hejuru. Twongereye .col
padi hamwe .px-md-5
hanyuma turwanya ibyo hamwe .mx-md-n5
nababyeyi .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>