in English

Gilay-on

Ang Bootstrap naglakip sa usa ka halapad nga mga klase sa shorthand responsive margin, padding, ug gap utility nga mga klase aron mabag-o ang hitsura sa usa ka elemento.

Niini nga panid

Margin ug padding

I-assign ang responsive-friendly margino paddingvalues sa usa ka elemento o subset sa mga kilid niini nga adunay mga shorthand classes. Naglakip sa suporta alang sa indibidwal nga mga kabtangan, tanan nga mga kabtangan, ug bertikal ug pinahigda nga mga kabtangan. Ang mga klase gitukod gikan sa usa ka default nga mapa sa Sass gikan sa .25remhangtod sa 3rem.

Gigamit ang CSS Grid layout module? Ikonsiderar ang paggamit sa gap utility .

Notasyon

Ang spacing utilities nga magamit sa tanang breakpoints, gikan xsngadto sa xxl, walay breakpoint abbreviation niini. Kini tungod kay kana nga mga klase gipadapat gikan min-width: 0ug pataas, ug sa ingon dili gigapos sa usa ka pangutana sa media. Ang nahabilin nga mga breakpoint, bisan pa, naglakip sa usa ka breakpoint abbreviation.

Ang mga klase ginganlan gamit ang pormat {property}{sides}-{size}para xsug {property}{sides}-{breakpoint}-{size}para sa sm, md, lg, xl, ug xxl.

Kung ang kabtangan usa sa:

m- alang sa mga klase nga gitakdamargin
p- alang sa mga klase nga gitakdapadding

Diin ang mga kilid usa sa:

t- para sa mga klase nga nagtakda margin-topopadding-top
b- para sa mga klase nga nagtakda margin-bottomopadding-bottom
s- (pagsugod) para sa mga klase nga nagtakda margin-lefto padding-leftsa LTR, margin-righto padding-rightsa RTL
e- (katapusan) alang sa mga klase nga nagtakda margin-righto padding-rightsa LTR, margin-lefto padding-leftsa RTL
x- alang sa mga klase nga nagtakda sa duha *-leftug*-right
y- alang sa mga klase nga nagtakda sa duha *-topug*-bottom
blangko - alang sa mga klase nga nagbutang usa margino paddingsa tanan nga 4 nga kilid sa elemento

Diin ang gidak-on usa sa:

0- alang sa mga klase nga nagwagtang sa margino paddingpinaagi sa pag-set niini sa0
1- (pinaagi sa default) alang sa mga klase nga nagtakda sa margino paddingsa$spacer * .25
2- (pinaagi sa default) alang sa mga klase nga nagtakda sa margino paddingsa$spacer * .5
3- (pinaagi sa default) alang sa mga klase nga nagtakda sa margino paddingsa$spacer
4- (pinaagi sa default) alang sa mga klase nga nagtakda sa margino paddingsa$spacer * 1.5
5- (pinaagi sa default) alang sa mga klase nga nagtakda sa margino paddingsa$spacer * 3
auto- para sa mga klase nga nagbutang sa marginauto

(Mahimo nimong idugang ang daghang mga gidak-on pinaagi sa pagdugang mga entri sa $spacersvariable sa mapa sa Sass.)

Mga pananglitan

Ania ang pipila ka representante nga mga pananglitan niini nga mga klase:

.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 nga pagsentro

Dugang pa, ang Bootstrap naglakip usab sa usa ka .mx-autoklase alang sa horizontally centering fixed-width block level content—nga mao, content nga adunay display: blockug usa ka widthset—pinaagi sa pag-set sa horizontal margins ngadto sa auto.

Nakasentro nga elemento

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

Negatibo nga margin

Sa CSS, marginang mga kabtangan mahimong mogamit sa negatibo nga mga kantidad ( paddingdili mahimo). Kini nga mga negatibo nga mga margin gi- disable pinaagi sa default , apan mahimo nga magamit sa Sass pinaagi sa pag-set $enable-negative-margins: true.

Ang syntax halos pareho sa default, positibo nga margin utilities, apan uban ang pagdugang sa nwala pa ang gihangyo nga gidak-on. Ania ang usa ka pananglitan nga klase nga sukwahi sa .mt-1:

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

Gap

Kung gigamit ang display: grid, mahimo nimong gamiton ang mga gamit sa gapsulud sa sulud sa ginikanan. Makadaginot kini sa pagdugang sa mga margin utilities sa tagsa-tagsa nga mga butang sa grid (mga anak sa usa ka display: gridsudlanan). Ang mga utilities sa gap responsive sa default, ug gihimo pinaagi sa among mga utilities API, base sa $spacersmapa sa Sass.

Grid nga butang 1

Grid nga butang 2

Grid nga butang 3

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

Ang suporta naglakip sa responsive nga mga opsyon alang sa tanang grid breakpoints sa Bootstrap, ingon man unom ka gidak-on gikan sa $spacersmapa ( 0– 5). Wala’y .gap-autoklase sa utility tungod kay epektibo kini nga parehas sa .gap-0.

Sass

Mga mapa

Gideklara ang mga gamit sa spacing pinaagi sa mapa sa Sass ug dayon gihimo gamit ang among API sa mga utilities.

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

$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null);

Utilities API

Gideklara ang mga gamit sa spacing sa among mga utilities API sa scss/_utilities.scss. Pagkat-on unsaon paggamit ang mga utilities API.

    "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
    ),