Spacing

Margin at padding

Magtalaga ng tumutugon-friendly margino paddingmga halaga sa isang elemento o isang subset ng mga panig nito na may mga klase ng shorthand. May kasamang suporta para sa mga indibidwal na property, lahat ng property, at vertical at horizontal property. Ang mga klase ay binuo mula sa isang default na mapa ng Sass mula .25remsa hanggang 3rem.

Gamit ang CSS Grid layout module? Isaalang-alang ang paggamit ng gap utility .

Notasyon

Ang mga spacing utilities na nalalapat sa lahat ng breakpoint, mula xshanggang xxl, ay walang pagdadaglat ng breakpoint sa mga ito. Ito ay dahil ang mga klase na iyon ay inilapat mula min-width: 0at pataas, at sa gayon ay hindi nakatali sa isang query sa media. Ang natitirang mga breakpoint, gayunpaman, ay may kasamang breakpoint abbreviation.

Ang mga klase ay pinangalanan gamit ang format {property}{sides}-{size}para sa xsat {property}{sides}-{breakpoint}-{size}para sa sm, md, lg, xl, at xxl.

Kung saan ang ari- arian ay isa sa:

• m- para sa mga klase na itinakdamargin
• p- para sa mga klase na itinakdapadding

Kung saan ang mga gilid ay isa sa:

• t- para sa mga klase na nagtatakda margin-topopadding-top
• b- para sa mga klase na nagtatakda margin-bottomopadding-bottom
• s- (simula) para sa mga klase na nakatakda margin-lefto padding-leftsa LTR, margin-righto padding-rightsa RTL
• e- (katapusan) para sa mga klase na nakatakda margin-righto padding-rightsa LTR, margin-lefto padding-leftsa RTL
• x- para sa mga klase na nagtatakda ng pareho *-leftat*-right
• y- para sa mga klase na nagtatakda ng pareho *-topat*-bottom
• blangko - para sa mga klase na nagtatakda ng margino paddingsa lahat ng 4 na panig ng elemento

Kung saan ang laki ay isa sa:

• 0- para sa mga klase na nag-aalis ng margino paddingsa pamamagitan ng pagtatakda nito sa0
• 1- (bilang default) para sa mga klase na nagtatakda ng margino paddingsa$spacer * .25
• 2- (bilang default) para sa mga klase na nagtatakda ng margino paddingsa$spacer * .5
• 3- (bilang default) para sa mga klase na nagtatakda ng margino paddingsa$spacer
• 4- (bilang default) para sa mga klase na nagtatakda ng margino paddingsa$spacer * 1.5
• 5- (bilang default) para sa mga klase na nagtatakda ng margino paddingsa$spacer * 3
• auto- para sa mga klase na itinakda ang marginsa auto

(Maaari kang magdagdag ng higit pang laki sa pamamagitan ng pagdaragdag ng mga entry sa $spacersSass map variable.)

Mga halimbawa

Narito ang ilang kinatawan ng mga halimbawa ng mga klase na ito:

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

Pahalang na pagsentro

Bilang karagdagan, ang Bootstrap ay nagsasama rin ng isang .mx-autoklase para sa pahalang na pagsentro ng nakapirming lapad na antas ng block na nilalaman—iyon ay, nilalamang mayroon display: blockat isang widthset—sa pamamagitan ng pagtatakda ng mga pahalang na margin sa auto.

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

Negatibong margin

Sa CSS, marginang mga katangian ay maaaring gumamit ng mga negatibong halaga ( paddinghindi maaaring). Ang mga negatibong margin na ito ay hindi pinagana bilang default , ngunit maaaring paganahin sa Sass sa pamamagitan ng pagtatakda $enable-negative-margins: true.

Ang syntax ay halos kapareho ng default, positibong margin utility, ngunit may pagdaragdag ng nbago ang hiniling na laki. Narito ang isang halimbawang klase na kabaligtaran ng .mt-1:

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

Gap

Kapag gumagamit display: gridng , maaari mong gamitin ang mga gaputility sa lalagyan ng parent grid. Makakatipid ito sa pagdaragdag ng mga margin utility sa mga indibidwal na grid item (mga anak ng isang display: gridlalagyan). Ang mga utility ng gap ay tumutugon bilang default, at nabuo sa pamamagitan ng aming API ng mga utility, batay sa $spacersmapa ng Sass.

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

Kasama sa suporta ang mga opsyong tumutugon para sa lahat ng mga breakpoint ng grid ng Bootstrap, pati na rin ang anim na laki mula sa $spacersmapa ( 0– 5). Walang .gap-autoklase ng utility dahil epektibo itong pareho sa .gap-0.

Sass

Mga mapa

Idineklara ang mga spacing utilities sa pamamagitan ng Sass map at pagkatapos ay binuo gamit ang aming mga utility API.

$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

Ang mga spacing utilities ay ipinahayag sa aming mga utility API sa scss/_utilities.scss. Matutunan kung paano gamitin ang utility 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
    ),