Jarak

Bootstrap termasuk julat luas margin responsif singkatan dan kelas utiliti padding untuk mengubah suai penampilan elemen.

Bagaimana ia berfungsi

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.

Notasi

Utiliti jarak yang digunakan untuk semua titik putus, dari xshingga xl, 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, dan xl.

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
l- untuk kelas yang menetapkan margin-leftataupadding-left
r- untuk kelas yang menetapkan margin-rightataupadding-right
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;
}

.ml-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). Mulai 4.2, kami telah menambah utiliti margin negatif untuk setiap saiz integer bukan sifar yang disenaraikan di atas (cth, 1, 2, 3, 4, 5). Utiliti ini sesuai untuk menyesuaikan talang lajur grid merentas titik putus.

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

Berikut ialah contoh menyesuaikan grid Bootstrap pada mdtitik putus sederhana ( ) dan ke atas. Kami telah meningkatkan .colpelapik dengan .px-md-5dan kemudian mengatasinya dengan .mx-md-n5pada induk .row.

Pelapik lajur tersuai

<div class="row mx-md-n5">
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
</div>