Jarak

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

Bagaimana itu bekerja

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.

Notasi

Utilitas spasi yang berlaku untuk semua breakpoint, dari xssampai xl, 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, dan xl.

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

.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 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). Pada 4.2, kami telah menambahkan utilitas margin negatif untuk setiap ukuran bilangan bulat bukan nol yang tercantum di atas (misalnya, 1, 2, 3, 4, 5). Utilitas ini ideal untuk menyesuaikan talang kolom kisi di seluruh titik putus.

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

Berikut adalah contoh penyesuaian grid Bootstrap pada mdbreakpoint medium ( ) dan di atasnya. Kami telah meningkatkan .colpadding with .px-md-5dan kemudian menetralkannya dengan .mx-md-n5pada parent .row.

Padding kolom khusus

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