Ntam a ɛwɔ ntam

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

Wɔ kratafa yi so

Margin ne padding a wɔde hyɛ mu

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.

Sɛ wode CSS Grid nhyehyɛe module no redi dwuma? Susuw ho sɛ wode gap utility no bedi dwuma mmom.

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

Spacing utilities a ɛfa breakpoints nyinaa ho, efi xsto xxl, 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, xl, ne xxl.

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
s- (fi ase) ma adesua a wode si margin-leftanaase padding-leftwo LTR mu, margin-rightanaase padding-rightwo RTL mu
e- (awiee) ma adesua a wode si margin-rightanaase padding-rightwo LTR mu, margin-leftanaase padding-leftwo RTL mu
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;
}

.ms-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). Saa negative margins yi yɛ nea wɔagyae no default so , nanso wobetumi ama ayɛ adwuma wɔ Sass mu denam nhyehyɛe so $enable-negative-margins: true.

Ɛ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;
}

Kwan

Sɛ wode redi dwuma display: grida, wubetumi de gaputilities adi dwuma wɔ ɔwofo grid container no so. Eyi betumi akora sika so wɔ hia a ɛsɛ sɛ wode margin utilities ka grid nneɛma ankorankoro ho (mmofra a wɔwɔ display: gridcontainer bi mu). Gap utilities no yɛ mmuaeɛ default so, na ɛnam yɛn utilities API so na ɛyɛ, a egyina $spacersSass map no so.

Grid adeɛ 1

Grid adeɛ 2

Grid adeɛ 3

html na ɛwɔ hɔ

<div class="d-grid gap-3">
  <div class="p-2 bg-light border">Grid item 1</div>
  <div class="p-2 bg-light border">Grid item 2</div>
  <div class="p-2 bg-light border">Grid item 3</div>
</div>

Mmoa no ka ho ne mmuaeɛ akwan a wɔfa so paw Bootstrap grid breakpoints nyinaa, ne akɛseɛ asia a ɛfiri $spacersmap no mu ( 0– 5). utility class biara nni hɔ .gap-autosɛnea ɛyɛ ade koro no ara wɔ ɔkwan a etu mpɔn so ne .gap-0.

Sass

Asase mfonini ahorow

Wɔnam Sass map so na ɛbɔ Spacing utilities ho dawuru na afei wɔde yɛn utilities API no yɛ.

$spacer: 1rem;
$spacers: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);

Nneɛma a wɔde di dwuma API

Wɔabɔ Spacing utilities ho dawuru wɔ yɛn utilities API mu wɔ scss/_utilities.scss. Sua sɛnea wode utilities API no bedi dwuma.

    "margin": (
      responsive: true,
      property: margin,
      class: m,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-x": (
      responsive: true,
      property: margin-right margin-left,
      class: mx,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-y": (
      responsive: true,
      property: margin-top margin-bottom,
      class: my,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-top": (
      responsive: true,
      property: margin-top,
      class: mt,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-end": (
      responsive: true,
      property: margin-right,
      class: me,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-bottom": (
      responsive: true,
      property: margin-bottom,
      class: mb,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-start": (
      responsive: true,
      property: margin-left,
      class: ms,
      values: map-merge($spacers, (auto: auto))
    ),
    // Negative margin utilities
    "negative-margin": (
      responsive: true,
      property: margin,
      class: m,
      values: $negative-spacers
    ),
    "negative-margin-x": (
      responsive: true,
      property: margin-right margin-left,
      class: mx,
      values: $negative-spacers
    ),
    "negative-margin-y": (
      responsive: true,
      property: margin-top margin-bottom,
      class: my,
      values: $negative-spacers
    ),
    "negative-margin-top": (
      responsive: true,
      property: margin-top,
      class: mt,
      values: $negative-spacers
    ),
    "negative-margin-end": (
      responsive: true,
      property: margin-right,
      class: me,
      values: $negative-spacers
    ),
    "negative-margin-bottom": (
      responsive: true,
      property: margin-bottom,
      class: mb,
      values: $negative-spacers
    ),
    "negative-margin-start": (
      responsive: true,
      property: margin-left,
      class: ms,
      values: $negative-spacers
    ),
    // Padding utilities
    "padding": (
      responsive: true,
      property: padding,
      class: p,
      values: $spacers
    ),
    "padding-x": (
      responsive: true,
      property: padding-right padding-left,
      class: px,
      values: $spacers
    ),
    "padding-y": (
      responsive: true,
      property: padding-top padding-bottom,
      class: py,
      values: $spacers
    ),
    "padding-top": (
      responsive: true,
      property: padding-top,
      class: pt,
      values: $spacers
    ),
    "padding-end": (
      responsive: true,
      property: padding-right,
      class: pe,
      values: $spacers
    ),
    "padding-bottom": (
      responsive: true,
      property: padding-bottom,
      class: pb,
      values: $spacers
    ),
    "padding-start": (
      responsive: true,
      property: padding-left,
      class: ps,
      values: $spacers
    ),
    // Gap utility
    "gap": (
      responsive: true,
      property: gap,
      class: gap,
      values: $spacers
    ),