Spasi

Bootstrap ngawengku rupa-rupa margin responsif shorthand jeung kelas utiliti padding pikeun ngaropéa penampilan hiji unsur urang.

Kumaha gawéna

Napelkeun responsif-friendly marginatawa paddingnilai ka unsur atawa sawaréh sisi na kalawan kelas shorthand. Ngawengku pangrojong pikeun sipat individu, sadaya sipat, sareng sipat vertikal sareng horizontal. Kelas diwangun tina peta Sass standar mimitian ti .25remka 3rem.

Notasi

Spasi Utiliti nu lumaku pikeun sakabéh breakpoints, ti xska xl, euweuh breakpoint singketan di dinya. Ieu kusabab kelas kasebut diterapkeun ti min-width: 0sareng ka luhur, sahingga henteu kaiket ku pamundut média. The breakpoints sésana, kumaha oge, kaasup hiji singketan breakpoint.

Kelas-kelas kasebut dingaranan ngagunakeun format {property}{sides}-{size}for xsjeung {property}{sides}-{breakpoint}-{size}for sm, md, lg, jeung xl.

Dimana harta mangrupikeun salah sahiji:

• m- pikeun kelas nu diaturmargin
• p- pikeun kelas nu diaturpadding

Dimana sisi mangrupa salah sahiji:

• t- pikeun kelas nu diatur margin-topatawapadding-top
• b- pikeun kelas nu diatur margin-bottomatawapadding-bottom
• l- pikeun kelas nu diatur margin-leftatawapadding-left
• r- pikeun kelas nu diatur margin-rightatawapadding-right
• x- pikeun kelas nu diatur duanana *-leftjeung*-right
• y- pikeun kelas nu diatur duanana *-topjeung*-bottom
• kosong - pikeun kelas anu nyetél marginatawa paddingdina sakabéh 4 sisi unsur

Dimana ukuranana mangrupikeun salah sahiji:

• 0- pikeun kelas anu ngaleungitkeun marginatanapi paddingku netepkeunana0
• 1- (sacara standar) pikeun kelas anu nyetél marginatanapi paddingka$spacer * .25
• 2- (sacara standar) pikeun kelas anu nyetél marginatanapi paddingka$spacer * .5
• 3- (sacara standar) pikeun kelas anu nyetél marginatanapi paddingka$spacer
• 4- (sacara standar) pikeun kelas anu nyetél marginatanapi paddingka$spacer * 1.5
• 5- (sacara standar) pikeun kelas anu nyetél marginatanapi paddingka$spacer * 3
• auto- pikeun kelas anu nyetél marginotomatis

(Anjeun tiasa nambihan langkung seueur ukuran ku nambihan éntri kana $spacersvariabel peta Sass.)

Contona

Ieu sababaraha conto perwakilan kelas ieu:

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

Puseur horisontal

Sajaba ti, Bootstrap ogé ngawengku hiji .mx-autokelas pikeun horisontal centering eusi tingkat blok-lebar dibereskeun-nyaéta, eusi nu boga display: blockjeung widthsusunan-ku netepkeun margins horizontal ka auto.

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