Jarak
Bootstrap kalebu macem-macem kelas margin responsif singkatan lan kelas sarana padding kanggo ngowahi tampilan unsur.
Cara kerjane
Nemtokake nilai-nilai responsif margin
utawa padding
nilai kanggo unsur utawa subset saka sisih karo kelas shorthand. Kalebu dhukungan kanggo properti individu, kabeh properti, lan properti vertikal lan horisontal. Kelas dibangun saka peta Sass standar wiwit saka .25rem
nganti 3rem
.
Notasi
Utilitas spasi sing ditrapake kanggo kabeh breakpoints, saka xs
nganti xl
, ora ana singkatan breakpoint. Iki amarga kelas kasebut diterapake saka min-width: 0
lan munggah, lan kanthi mangkono ora kaiket karo pitakon media. Nanging, breakpoints sing isih ana, kalebu singkatan breakpoint.
Kelas kasebut dijenengi nggunakake format {property}{sides}-{size}
kanggo xs
lan {property}{sides}-{breakpoint}-{size}
kanggo sm
, md
, lg
, lan xl
.
Ing endi properti minangka salah sawijining:
m
- kanggo kelas sing nyetelmargin
p
- kanggo kelas sing nyetelpadding
Ing ngendi sisih iku salah siji saka:
t
- kanggo kelas sing nyetelmargin-top
utawapadding-top
b
- kanggo kelas sing nyetelmargin-bottom
utawapadding-bottom
l
- kanggo kelas sing nyetelmargin-left
utawapadding-left
r
- kanggo kelas sing nyetelmargin-right
utawapadding-right
x
- kanggo kelas sing nyetel loro*-left
lan*-right
y
- kanggo kelas sing nyetel loro*-top
lan*-bottom
- blank - kanggo kelas sing nyetel
margin
utawapadding
ing kabeh 4 sisih unsur
Ngendi ukuran salah siji saka:
0
- kanggo kelas sing ngilangimargin
utawapadding
kanthi nyetel menyang0
1
- (kanthi standar) kanggo kelas sing nyetelmargin
utawapadding
kanggo$spacer * .25
2
- (kanthi standar) kanggo kelas sing nyetelmargin
utawapadding
kanggo$spacer * .5
3
- (kanthi standar) kanggo kelas sing nyetelmargin
utawapadding
kanggo$spacer
4
- (kanthi standar) kanggo kelas sing nyetelmargin
utawapadding
kanggo$spacer * 1.5
5
- (kanthi standar) kanggo kelas sing nyetelmargin
utawapadding
kanggo$spacer * 3
auto
- kanggo kelas sing nyetelmargin
otomatis
(Sampeyan bisa nambah ukuran liyane kanthi nambahake entri menyang $spacers
variabel peta Sass.)
Tuladha
Ing ngisor iki sawetara conto perwakilan saka kelas kasebut:
.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;
}
Pusat horisontal
Kajaba iku, Bootstrap uga kalebu .mx-auto
kelas kanggo horisontal centering isi tingkat pamblokiran jembaré tetep-yaiku, isi sing wis display: block
lan width
set-kanthi nyetel wates horisontal kanggo auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Margin negatif
Ing CSS, margin
properti bisa nggunakake nilai negatif ( padding
ora bisa). Ing 4.2, kita wis nambahake utilitas margin negatif kanggo saben ukuran integer non-nol sing kadhaptar ing ndhuwur (contone, 1
, 2
, 3
, 4
, 5
). Utilitas iki cocog kanggo ngatur talang kolom kothak ing titik putus.
Sintaks meh padha karo standar, utilitas margin positif, nanging kanthi tambahan n
sadurunge ukuran sing dijaluk. Iki minangka conto kelas sing kosok balene .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Ing ngisor iki conto ngatur kothak Bootstrap ing titik istirahat medium ( md
) lan ndhuwur. Kita wis nambah .col
padding karo .px-md-5
banjur counteracted karo .mx-md-n5
ing wong tuwa .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>