Source

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>