Jarak

Bootstrap kalebu macem-macem kelas margin responsif singkatan, padding, lan gap kanggo ngowahi tampilan unsur.

Ing kaca iki

Margin lan padding

Nemtokake nilai-nilai responsif marginutawa paddingnilai kanggo unsur utawa subset saka sisih karo kelas shorthand. Kalebu dhukungan kanggo properti individu, kabeh properti, lan properti vertikal lan horisontal. Kelas dibangun saka peta Sass standar wiwit saka .25remnganti 3rem.

Nggunakake modul tata letak Grid CSS? Coba gunakake sarana gap tinimbang.

Notasi

Utilitas spasi sing ditrapake kanggo kabeh breakpoints, saka xsnganti xxl, ora ana singkatan breakpoint. Iki amarga kelas kasebut diterapake saka min-width: 0lan munggah, lan kanthi mangkono ora kaiket karo pitakon media. Nanging, breakpoints sing isih ana, kalebu singkatan breakpoint.

Kelas kasebut dijenengi nggunakake format {property}{sides}-{size}kanggo xslan {property}{sides}-{breakpoint}-{size}kanggo sm, md, lg, xl, lan xxl.

Ing endi properti minangka salah sawijining:

m- kanggo kelas sing nyetelmargin
p- kanggo kelas sing nyetelpadding

Ing ngendi sisih iku salah siji saka:

t- kanggo kelas sing nyetel margin-toputawapadding-top
b- kanggo kelas sing nyetel margin-bottomutawapadding-bottom
s- (wiwitan) kanggo kelas sing nyetel margin-leftutawa padding-lefting LTR, margin-rightutawa padding-righting RTL
e- (mburi) kanggo kelas sing nyetel margin-rightutawa padding-righting LTR, margin-leftutawa padding-lefting RTL
x- kanggo kelas sing nyetel loro *-leftlan*-right
y- kanggo kelas sing nyetel loro *-toplan*-bottom
blank - kanggo kelas sing nyetel marginutawa paddinging kabeh 4 sisih unsur

Ngendi ukuran salah siji saka:

0- kanggo kelas sing ngilangi marginutawa paddingkanthi nyetel menyang0
1- (kanthi standar) kanggo kelas sing nyetel marginutawa paddingkanggo$spacer * .25
2- (kanthi standar) kanggo kelas sing nyetel marginutawa paddingkanggo$spacer * .5
3- (kanthi standar) kanggo kelas sing nyetel marginutawa paddingkanggo$spacer
4- (kanthi standar) kanggo kelas sing nyetel marginutawa paddingkanggo$spacer * 1.5
5- (kanthi standar) kanggo kelas sing nyetel marginutawa paddingkanggo$spacer * 3
auto- kanggo kelas sing nyetel marginotomatis

(Sampeyan bisa nambah ukuran liyane kanthi nambahake entri menyang $spacersvariabel peta Sass.)

Tuladha

Ing ngisor iki sawetara conto perwakilan saka kelas kasebut:

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

Pusat horisontal

Kajaba iku, Bootstrap uga kalebu .mx-autokelas kanggo horisontal centering isi tingkat pamblokiran jembaré tetep-yaiku, isi sing wis display: blocklan widthset-kanthi nyetel wates horisontal kanggo auto.

Unsur tengah

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

Margin negatif

Ing CSS, marginproperti bisa nggunakake nilai negatif ( paddingora bisa). Margin negatif iki dipateni kanthi gawan , nanging bisa diaktifake ing Sass kanthi nyetel $enable-negative-margins: true.

Sintaks meh padha karo standar, utilitas margin positif, nanging kanthi tambahan nsadurunge ukuran sing dijaluk. Iki minangka conto kelas sing kosok balene .mt-1:

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

gap

Nalika nggunakake display: grid, sampeyan bisa nggunakake gaputilitas ing wadhah kothak induk. Iki bisa ngirit yen kudu nambah utilitas margin menyang item kothak individu (anak saka display: gridwadhah). Utilitas Gap responsif kanthi standar, lan digawe liwat API utilitas, adhedhasar $spacerspeta Sass.

Grid item 1

Grid item 2

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

Dhukungan kalebu opsi responsif kanggo kabeh breakpoints kothak Bootstrap, uga enem ukuran saka $spacerspeta ( 0- 5). Ora ana .gap-autokelas utilitas amarga efektif padha karo .gap-0.

Sass

Peta

Utilitas jarak diumumake liwat peta Sass banjur digawe nganggo API keperluan kita.

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

Utilities API

Utilitas jarak diumumake ing API keperluan kita ing scss/_utilities.scss. Sinau carane nggunakake API keperluan.

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