Jarak

Bootstrap mencakup berbagai margin responsif singkatan, padding, dan kelas utilitas celah untuk memodifikasi tampilan elemen.

Di halaman ini

Margin dan bantalan

Tetapkan nilai marginatau ramah-responsif paddingke elemen atau subset sisinya dengan kelas singkatan. Termasuk dukungan untuk properti individu, semua properti, dan properti vertikal dan horizontal. Kelas dibangun dari peta Sass default mulai .25remdari 3rem.

Menggunakan modul tata letak Grid CSS? Pertimbangkan untuk menggunakan utilitas celah .

Notasi

Utilitas spasi yang berlaku untuk semua breakpoint, dari xssampai xxl, tidak memiliki singkatan breakpoint di dalamnya. Ini karena kelas tersebut diterapkan dari min-width: 0dan ke atas, dan dengan demikian tidak terikat oleh kueri media. Breakpoints yang tersisa, bagaimanapun, termasuk singkatan breakpoint.

Kelas diberi nama menggunakan format {property}{sides}-{size}untuk xsdan {property}{sides}-{breakpoint}-{size}untuk sm, md, lg, xl, dan xxl.

Dimana properti adalah salah satu dari:

m- untuk kelas yang ditetapkanmargin
p- untuk kelas yang ditetapkanpadding

Dimana sisi adalah salah satu dari:

t- untuk kelas yang mengatur margin-topataupadding-top
b- untuk kelas yang mengatur margin-bottomataupadding-bottom
s- (mulai) untuk kelas yang disetel margin-leftatau padding-leftdi LTR, margin-rightatau padding-rightdi RTL
e- (akhir) untuk kelas yang ditetapkan margin-rightatau padding-rightdi LTR, margin-leftatau padding-leftdi RTL
x- untuk kelas yang mengatur keduanya *-leftdan*-right
y- untuk kelas yang mengatur keduanya *-topdan*-bottom
kosong - untuk kelas yang menetapkan a marginatau paddingdi keempat sisi elemen

Dimana ukuran adalah salah satu dari:

0- untuk kelas yang menghilangkan marginatau paddingdengan menyetelnya ke0
1- (secara default) untuk kelas yang menyetel marginatau paddingke$spacer * .25
2- (secara default) untuk kelas yang menyetel marginatau paddingke$spacer * .5
3- (secara default) untuk kelas yang menyetel marginatau paddingke$spacer
4- (secara default) untuk kelas yang menyetel marginatau paddingke$spacer * 1.5
5- (secara default) untuk kelas yang menyetel marginatau paddingke$spacer * 3
auto- untuk kelas yang menyetel marginke otomatis

(Anda dapat menambahkan lebih banyak ukuran dengan menambahkan entri ke $spacersvariabel peta Sass.)

Contoh

Berikut adalah beberapa contoh representatif dari kelas-kelas ini:

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

Pemusatan horizontal

Selain itu, Bootstrap juga menyertakan .mx-autokelas untuk konten level blok lebar tetap yang terpusat secara horizontal—yaitu, konten yang memiliki display: blockdan satu widthset—dengan menyetel margin horizontal ke auto.

Elemen terpusat

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

Margin negatif

Di CSS, marginproperti dapat memanfaatkan nilai negatif ( paddingtidak bisa). Margin negatif ini dinonaktifkan secara default , tetapi dapat diaktifkan di Sass dengan pengaturan $enable-negative-margins: true.

Sintaksnya hampir sama dengan utilitas margin positif default, tetapi dengan penambahan nsebelum ukuran yang diminta. Berikut adalah contoh kelas yang kebalikan dari .mt-1:

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

Celah

Saat menggunakan display: grid, Anda dapat menggunakan gaputilitas pada wadah grid induk. Ini dapat menghemat keharusan menambahkan utilitas margin ke item kisi individual (anak-anak dari sebuah display: gridwadah). Utilitas celah responsif secara default, dan dihasilkan melalui API utilitas kami, berdasarkan $spacerspeta Sass.

Kotak item 1

Kotak item 2

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

Dukungan mencakup opsi responsif untuk semua breakpoint grid Bootstrap, serta enam ukuran dari $spacerspeta ( 0– 5). Tidak ada .gap-autokelas utilitas karena secara efektif sama dengan .gap-0.

Kelancangan

Peta

Utilitas spasi dideklarasikan melalui peta Sass dan kemudian dibuat dengan API utilitas kami.

$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);

API Utilitas

Utilitas spasi dideklarasikan di API utilitas kami di scss/_utilities.scss. Pelajari cara menggunakan API utilitas.

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