Source

Jarak

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

Cara kerjane

marginNemtokake nilai utawa nilai sing responsif paddingkanggo 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, breakpoint 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 blok 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>