Ntam a ɛwɔ ntam

Bootstrap no ka shorthand responsive margin ne padding utility class ahorow pii ho de sesa element bi hwɛbea.

Sɛnea ɛyɛ adwuma

Fa mmuae-adamfofa marginanaa paddinggyinapɛn ahorow ma element bi anaa n’afã horow no fã ketewaa bi a ɛwɔ nkyerɛwde tiawa adesua ahorow. Nea ɛka ho ne mmoa ma ankorankoro agyapade, agyapade nyinaa, ne vertical ne horizontal agyapade. Wɔkyekye adesua ahorow no fi Sass map a wɔahyɛ da ayɛ a efi .25remkosi 3rem.

Nkyerɛwde a wɔde kyerɛw nsɛm

Spacing utilities a ɛfa breakpoints nyinaa ho, efi xsto xl, nni breakpoint abbreviation biara wɔ mu. Eyi te saa efisɛ wɔde saa adesua ahorow no di dwuma fi min-width: 0ne soro, na ɛnam saa kwan yi so no wɔmfa media asɛmmisa nkyekyere wɔn. Nanso, breakpoints a aka no, breakpoint a wɔatwa no tiawa ka ho.

Wɔde ɔkwan a wɔfa so {property}{sides}-{size}yɛ xsne {property}{sides}-{breakpoint}-{size}nea wɔde yɛ sm, md, lg, ne xl.

Baabi a agyapade yɛ biako a:

m- ma adesua ahoroo a eto somargin
p- ma adesua ahoroo a eto sopadding

Baabi a afã horow no yɛ biako:

t- ma adesua a wode si margin-topanaapadding-top
b- ma adesua a wode si margin-bottomanaapadding-bottom
l- ma adesua a wode si margin-leftanaapadding-left
r- ma adesua a wode si margin-rightanaapadding-right
x- ma adesua ahorow a wode abien no nyinaa si *-leftne*-right
y- ma adesua ahorow a wode abien no nyinaa si *-topne*-bottom
blank - ma adesua a wode a marginanaase paddingwo element no afã 4 nyinaa so

Baabi a kɛseyɛ yɛ biako wɔ:

0- ma adesua ahoroo a eyi marginanaase paddingenam se wode besi so0
1- (defato) ma adesua a wode marginanaase paddingto$spacer * .25
2- (defato) ma adesua a wode marginanaase paddingto$spacer * .5
3- (defato) ma adesua a wode marginanaase paddingto$spacer
4- (defato) ma adesua a wode marginanaase paddingto$spacer * 1.5
5- (defato) ma adesua a wode marginanaase paddingto$spacer * 3
auto- ma adesua a wode marginto auto

(Wubetumi de akɛse pii aka ho denam nsɛm a wode bɛka $spacersSass map variable no ho no so.)

Nhwɛso ahorow

Saa adesuakuw ahorow yi ho nhwɛso ahorow bi a egyina hɔ ma ni:

.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 a wɔde hyɛ mfinimfini

Bio nso, Bootstrap nso de .mx-autoadesuakuw bi a wɔde hyɛ mfinimfini a ɛkɔ soro a ɛwɔ fixed-width block level content —kyerɛ sɛ, nsɛm a ɛwɔ display: blockne widthset bi —denam horizontal margins a wɔde besi hɔ sɛ auto.

Element a ɛwɔ mfinimfini

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