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 nsɛm ho amanneɛbɔfo 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

Faako a afã horow yɛ biako a:

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

(Wobɛtumi de akɛseɛ foforɔ aka ho denam nsɛm a wode bɛka $spacersSass map variable no ho no so.)

Nhwɛso ahorow

Saa adesua 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 auto.

Element a ɛwɔ mfinimfini

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

Negative margin a ɛyɛ hu

Wɔ CSS mu no, marginagyapade betumi de botae ahorow a enye adi dwuma ( paddingntumi). Ɛde besi 4.2 no, yɛde negative margin utilities aka ho ama integer kɛse biara a ɛnyɛ zero a wɔakyerɛw wɔ atifi hɔ (sɛ nhwɛso no, 1, 2, 3, 4, 5). Saa utilities yi yɛ papa ma customizing grid column gutters wɔ breakpoints nyinaa.

Ɛkame ayɛ sɛ syntax no ne default, positive margin utilities no yɛ pɛ, nanso wɔde aka ho nansa na wɔabisa no kɛse. Nhwɛso adesuakuw bi a ɛne .mt-1:

.mt-n1 {
  margin-top: -0.25rem !important;
}

Nhwɛsoɔ a ɛfa sɛnea wobɛsesa Bootstrap grid no wɔ medium ( md) breakpoint ne nea ɛboro saa no ni. Yɛama .colpadding no akɔ soro ne .px-md-5na afei yɛakasa atia saa no ne .mx-md-n5wɔ ɔwofo no .rowso .

Custom column padding a wɔde ahyɛ mu

<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>