Jarak

Bootstrap termasuk pelbagai kelas margin responsif singkatan, padding dan kelas utiliti jurang untuk mengubah suai penampilan elemen.

Pada halaman ini

Margin dan padding

Berikan mesra responsif marginatau paddingnilai kepada elemen atau subset sisinya dengan kelas trengkas. Termasuk sokongan untuk sifat individu, semua sifat dan sifat menegak dan mendatar. Kelas dibina daripada peta Sass lalai daripada .25remhingga 3rem.

Menggunakan modul susun atur Grid CSS? Pertimbangkan untuk menggunakan utiliti jurang .

Notasi

Utiliti jarak yang digunakan untuk semua titik putus, dari xshingga xxl, tidak mempunyai singkatan titik putus di dalamnya. Ini kerana kelas tersebut digunakan dari min-width: 0dan ke atas, dan oleh itu tidak terikat dengan pertanyaan media. Walau bagaimanapun, titik putus yang selebihnya termasuk singkatan titik putus.

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

Di mana harta adalah salah satu daripada:

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

Di mana sisi adalah salah satu daripada:

t- untuk kelas yang menetapkan margin-topataupadding-top
b- untuk kelas yang menetapkan margin-bottomataupadding-bottom
s- (mula) untuk kelas yang ditetapkan margin-leftatau padding-leftdalam LTR, margin-rightatau padding-rightdalam RTL
e- (tamat) untuk kelas yang ditetapkan margin-rightatau padding-rightdalam LTR, margin-leftatau padding-leftdalam RTL
x- untuk kelas yang menetapkan kedua -dua *-leftdan*-right
y- untuk kelas yang menetapkan kedua -dua *-topdan*-bottom
kosong - untuk kelas yang menetapkan marginatau paddingpada semua 4 sisi elemen

Di mana saiz adalah salah satu daripada:

0- untuk kelas yang menghapuskan marginatau paddingdengan menetapkannya kepada0
1- (secara lalai) untuk kelas yang menetapkan marginatau paddingkepada$spacer * .25
2- (secara lalai) untuk kelas yang menetapkan marginatau paddingkepada$spacer * .5
3- (secara lalai) untuk kelas yang menetapkan marginatau paddingkepada$spacer
4- (secara lalai) untuk kelas yang menetapkan marginatau paddingkepada$spacer * 1.5
5- (secara lalai) untuk kelas yang menetapkan marginatau paddingkepada$spacer * 3
auto- untuk kelas yang menetapkan marginkepada auto

(Anda boleh menambah lebih banyak saiz dengan menambahkan entri pada $spacerspembolehubah peta Sass.)

Contoh

Berikut ialah beberapa contoh perwakilan 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 mendatar

Selain itu, Bootstrap turut menyertakan .mx-autokelas untuk kandungan aras blok lebar tetap yang melintang memusatkan—iaitu kandungan yang mempunyai display: blockdan satu widthset—dengan menetapkan jidar mendatar kepada auto.

Elemen berpusat

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

Margin negatif

Dalam CSS, marginsifat boleh menggunakan nilai negatif ( paddingtidak boleh). Margin negatif ini dilumpuhkan secara lalai , tetapi boleh didayakan dalam Sass dengan tetapan $enable-negative-margins: true.

Sintaksnya hampir sama dengan utiliti margin positif lalai, tetapi dengan penambahan nsebelum saiz yang diminta. Berikut ialah kelas contoh yang bertentangan dengan .mt-1:

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

Jurang

Apabila menggunakan display: grid, anda boleh menggunakan gaputiliti pada bekas grid induk. Ini boleh menjimatkan keperluan untuk menambah utiliti margin pada item grid individu (anak-anak display: gridbekas). Utiliti Gap responsif secara lalai, dan dijana melalui API utiliti kami, berdasarkan $spacerspeta Sass.

Item grid 1

Item grid 2

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

Sokongan termasuk pilihan responsif untuk semua titik putus grid Bootstrap, serta enam saiz dari $spacerspeta ( 0– 5). Tiada .gap-autokelas utiliti kerana ia berkesan sama seperti .gap-0.

Sass

Peta

Utiliti jarak diisytiharkan melalui peta Sass dan kemudian dijana dengan API utiliti 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 Utiliti

Utiliti jarak diisytiharkan dalam API utiliti kami dalam scss/_utilities.scss. Ketahui cara menggunakan API utiliti.

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