Jarak

Bootstrap kalebu macem-macem kelas margin responsif singkatan lan kelas sarana padding kanggo ngowahi tampilan unsur.

Cara kerjane

Nemtokake nilai-nilai responsif marginutawa paddingnilai 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 .25remnganti 3rem.

Notasi

Utilitas spasi sing ditrapake kanggo kabeh breakpoints, saka xsnganti xl, ora ana singkatan breakpoint. Iki amarga kelas kasebut diterapake saka min-width: 0lan 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 xslan {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 nyetel margin-toputawapadding-top
b- kanggo kelas sing nyetel margin-bottomutawapadding-bottom
l- kanggo kelas sing nyetel margin-leftutawapadding-left
r- kanggo kelas sing nyetel margin-rightutawapadding-right
x- kanggo kelas sing nyetel loro *-leftlan*-right
y- kanggo kelas sing nyetel loro *-toplan*-bottom
blank - kanggo kelas sing nyetel marginutawa paddinging kabeh 4 sisih unsur

Ngendi ukuran salah siji saka:

0- kanggo kelas sing ngilangi marginutawa paddingkanthi nyetel menyang0
1- (kanthi standar) kanggo kelas sing nyetel marginutawa paddingkanggo$spacer * .25
2- (kanthi standar) kanggo kelas sing nyetel marginutawa paddingkanggo$spacer * .5
3- (kanthi standar) kanggo kelas sing nyetel marginutawa paddingkanggo$spacer
4- (kanthi standar) kanggo kelas sing nyetel marginutawa paddingkanggo$spacer * 1.5
5- (kanthi standar) kanggo kelas sing nyetel marginutawa paddingkanggo$spacer * 3
auto- kanggo kelas sing nyetel marginotomatis

(Sampeyan bisa nambah ukuran liyane kanthi nambahake entri menyang $spacersvariabel 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-autokelas kanggo horisontal centering isi tingkat pamblokiran jembaré tetep-yaiku, isi sing wis display: blocklan widthset-kanthi nyetel wates horisontal kanggo auto.

Unsur tengah

<div class="mx-auto" style="width: 200px;">
  Centered element
</div>

Margin negatif

Ing CSS, marginproperti bisa nggunakake nilai negatif ( paddingora 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 nsadurunge 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 .colpadding karo .px-md-5banjur counteracted karo .mx-md-n5ing wong tuwa .row.

Padding kolom khusus

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