Umwanya

Bootstrap ikubiyemo intera nini ya shorthand yitabiriye 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 ntagahuzwa nibibazo byitangazamakuru. 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.

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