Jarak
Bootstrap termasuk julat luas margin responsif singkatan dan kelas utiliti padding untuk mengubah suai penampilan elemen.
Bagaimana ia berfungsi
Berikan mesra responsif margin
atau padding
nilai 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 .25rem
hingga 3rem
.
Notasi
Utiliti jarak yang digunakan untuk semua titik putus, dari xs
hingga xl
, tidak mempunyai singkatan titik putus di dalamnya. Ini kerana kelas tersebut digunakan dari min-width: 0
dan 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 xs
dan {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 menetapkanmargin-top
ataupadding-top
b
- untuk kelas yang menetapkanmargin-bottom
ataupadding-bottom
l
- untuk kelas yang menetapkanmargin-left
ataupadding-left
r
- untuk kelas yang menetapkanmargin-right
ataupadding-right
x
- untuk kelas yang menetapkan kedua -dua*-left
dan*-right
y
- untuk kelas yang menetapkan kedua -dua*-top
dan*-bottom
- kosong - untuk kelas yang menetapkan
margin
ataupadding
pada semua 4 sisi elemen
Di mana saiz adalah salah satu daripada:
0
- untuk kelas yang menghapuskanmargin
ataupadding
dengan menetapkannya kepada0
1
- (secara lalai) untuk kelas yang menetapkanmargin
ataupadding
kepada$spacer * .25
2
- (secara lalai) untuk kelas yang menetapkanmargin
ataupadding
kepada$spacer * .5
3
- (secara lalai) untuk kelas yang menetapkanmargin
ataupadding
kepada$spacer
4
- (secara lalai) untuk kelas yang menetapkanmargin
ataupadding
kepada$spacer * 1.5
5
- (secara lalai) untuk kelas yang menetapkanmargin
ataupadding
kepada$spacer * 3
auto
- untuk kelas yang menetapkanmargin
kepada auto
(Anda boleh menambah lebih banyak saiz dengan menambahkan entri pada $spacers
pembolehubah 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-auto
kelas untuk kandungan aras blok lebar tetap yang melintang memusatkan—iaitu kandungan yang mempunyai display: block
dan satu width
set—dengan menetapkan jidar mendatar kepada auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Margin negatif
Dalam CSS, margin
sifat boleh menggunakan nilai negatif ( padding
tidak 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 n
sebelum 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 md
titik putus sederhana ( ) dan ke atas. Kami telah meningkatkan .col
pelapik dengan .px-md-5
dan kemudian mengatasinya dengan .mx-md-n5
pada induk .row
.
<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>