Spasi

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

Kumaha gawéna

Netepkeun nilai ramah-responsif marginatanapi paddingnilai kana unsur atanapi sawaréh sisina sareng kelas singgetan. 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 nganggo format {property}{sides}-{size}for xsand {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 disetel marginka otomatis

(Anjeun tiasa nambihan langkung seueur ukuran ku cara 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>