Source

Umwanya

Bootstrap ikubiyemo intera nini ya shorthand yitabira margin hamwe na padding yingirakamaro kugirango uhindure ikintu kigaragara.

Uburyo ikora

Shinga igisubizo-cyiza margincyangwa paddingindangagaciro 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 .25remkuri 3rem.

Icyitonderwa

Umwanya utanga ibikoresho bikoreshwa mubice byose, kuva xskuri xl, nta magambo ahinnye muri byo. Ibi ni ukubera ko ayo masomo akoreshwa kuva min-width: 0hejuru no hejuru, bityo ntagengwa nikibazo cyitangazamakuru. Ibice bisigaye, ariko, birimo amagambo ahinnye.

Amasomo yitiriwe ukoresheje imiterere {property}{sides}-{size}ya xsna {property}{sides}-{breakpoint}-{size},,, na sm.mdlgxl

Aho umutungo ari umwe muri:

m- ku masomo yashizehomargin
p- ku masomo yashizehopadding

Aho impande ari imwe muri:

t- ku masomo ashyiraho margin-topcyangwapadding-top
b- ku masomo ashyiraho margin-bottomcyangwapadding-bottom
l- ku masomo ashyiraho margin-leftcyangwapadding-left
r- ku masomo ashyiraho margin-rightcyangwapadding-right
x- kumasomo ashyiraho byombi *-leftna*-right
y- kumasomo ashyiraho byombi *-topna*-bottom
ubusa - kumasomo ashyiraho a margincyangwa paddingkumpande 4 zose yibintu

Aho ingano ari imwe muri:

0- kumasomo akuraho margincyangwa cyangwa paddingkuyashyiraho0
1- (Mburabuzi) kumasomo ashyiraho margincyangwa paddingkuri$spacer * .25
2- (Mburabuzi) kumasomo ashyiraho margincyangwa paddingkuri$spacer * .5
3- (Mburabuzi) kumasomo ashyiraho margincyangwa paddingkuri$spacer
4- (Mburabuzi) kumasomo ashyiraho margincyangwa paddingkuri$spacer * 1.5
5- (Mburabuzi) kumasomo ashyiraho margincyangwa paddingkuri$spacer * 3
auto- kumasomo ashyiraho marginimodoka

(Urashobora kongeramo ubunini wongeyeho ibyanditswe kuri $spacersSass 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-autoicyiciro cyo gutambukiranya hagati yubugari bwagutse buringaniye-ni ukuvuga ibirimo bifite display: blockhamwe widthnugushiraho - mugushiraho impande zombi auto.

Ikintu cyibanze

<div class="mx-auto" style="width: 200px;">
  Centered element
</div>

Inyungu mbi

Muri CSS, marginimitungo irashobora gukoresha indangagaciro mbi ( paddingntishobora). 1Kuva 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.45

Igishushanyo ni kimwe nkibisanzwe, byiza margin yingirakamaro, ariko hamwe ninyongera nmbere 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 .colpadi hamwe .px-md-5hanyuma turwanya ibyo hamwe .mx-md-n5nababyeyi .row.

Koresha inkingi

<div class="row mx-md-n5">
  <div class="col py-3 px-md-5 border bg-light">Custom column padding</div>
  <div class="col py-3 px-md-5 border bg-light">Custom column padding</div>
</div>