Spasi

Bootstrap ngawengku rupa-rupa margin responsif shorthand, padding, sarta kelas utiliti gap pikeun ngaropéa penampilan hiji unsur urang.

Dina kaca ieu

Margin jeung padding

Netepkeun nilai ramah-responsif marginatanapi paddingnilai kana unsur atanapi sawaréh sisina sareng kelas singgetan. Ngawengku pangrojong pikeun sipat individu, sadaya sipat, sareng sipat vertikal sareng horizontal. Kelas diwangun tina peta Sass standar mimitian ti .25remka 3rem.

Ngagunakeun modul perenah CSS Grid? Pertimbangkeun nganggo utilitas gap .

Notasi

Spasi Utiliti nu lumaku pikeun sakabéh breakpoints, ti xska xxl, euweuh breakpoint singketan di dinya. Ieu kusabab kelas kasebut diterapkeun ti min-width: 0sareng ka luhur, sahingga henteu kaiket ku pamundut média. The breakpoints sésana, kumaha oge, kaasup hiji singketan breakpoint.

Kelas-kelas kasebut dingaranan ngagunakeun format {property}{sides}-{size}for xsjeung {property}{sides}-{breakpoint}-{size}for sm, md, lg, xl, jeung xxl.

Dimana harta mangrupikeun salah sahiji:

m- pikeun kelas nu diaturmargin
p- pikeun kelas nu diaturpadding

Dimana sisi mangrupa salah sahiji:

t- pikeun kelas nu diatur margin-topatawapadding-top
b- pikeun kelas nu diatur margin-bottomatawapadding-bottom
s- (mimiti) pikeun kelas anu disetél margin-leftatanapi padding-leftdi LTR, margin-rightatanapi padding-rightdi RTL
e- (tungtung) pikeun kelas anu disetél margin-rightatanapi padding-rightdi LTR, margin-leftatanapi padding-leftdi RTL
x- pikeun kelas nu diatur duanana *-leftjeung*-right
y- pikeun kelas nu diatur duanana *-topjeung*-bottom
kosong - pikeun kelas anu nyetél marginatawa paddingdina sakabéh 4 sisi unsur

Dimana ukuranana mangrupikeun salah sahiji:

0- pikeun kelas anu ngaleungitkeun marginatanapi paddingku netepkeunana0
1- (sacara standar) pikeun kelas anu nyetél marginatanapi paddingka$spacer * .25
2- (sacara standar) pikeun kelas anu nyetél marginatanapi paddingka$spacer * .5
3- (sacara standar) pikeun kelas anu nyetél marginatanapi paddingka$spacer
4- (sacara standar) pikeun kelas anu nyetél marginatanapi paddingka$spacer * 1.5
5- (sacara standar) pikeun kelas anu nyetél marginatanapi paddingka$spacer * 3
auto- pikeun kelas anu nyetél marginotomatis

(Anjeun tiasa nambihan langkung seueur ukuran ku cara nambihan éntri kana $spacersvariabel peta Sass.)

Contona

Ieu sababaraha conto perwakilan kelas ieu:

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

Puseur horisontal

Sajaba ti, Bootstrap ogé ngawengku hiji .mx-autokelas pikeun horisontal centering eusi tingkat blok-lebar dibereskeun-nyaéta, eusi nu boga display: blockjeung widthsusunan-ku netepkeun margins horizontal ka auto.

Unsur puseur

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

Margin négatif

Dina CSS, marginsipat bisa ngamangpaatkeun nilai négatip ( paddingteu bisa). Margin négatip ieu ditumpurkeun sacara standar , tapi tiasa diaktipkeun dina Sass ku setelan $enable-negative-margins: true.

Sintaksisna ampir sami sareng standar, utilitas margin positif, tapi ditambah nsateuacan ukuran anu dipénta. Ieu conto kelas anu sabalikna tina .mt-1:

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

Gap

Nalika nganggo display: grid, anjeun tiasa nganggo gaputilitas dina wadah grid indungna. Ieu tiasa ngahemat kedah nambihan utilitas margin kana barang-barang grid individu (anak display: gridwadah). Utiliti Gap responsif sacara standar, sareng dihasilkeun tina API utilitas kami, dumasar kana $spacerspeta Sass.

Item grid 1

Item grid 2

Item grid 3

html

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

Rojongan ngawengku pilihan responsif pikeun sakabéh breakpoints grid Bootstrap, kitu ogé genep ukuran tina $spacerspeta ( 0- 5). Henteu aya .gap-autokelas utilitas sabab sacara efektif sami sareng .gap-0.

Sass

Peta

Utiliti jarak dinyatakeun via peta Sass teras didamel nganggo API utilitas kami.

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

Utiliti API

Utiliti jarak dinyatakeun dina API utilitas kami di scss/_utilities.scss. Diajar kumaha ngagunakeun Utiliti 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
    ),
    // Gap utility
    "gap": (
      responsive: true,
      property: gap,
      class: gap,
      values: $spacers
    ),