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.

Unsur puseur

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

Margin négatif

Dina CSS, marginsipat bisa ngamangpaatkeun nilai négatip ( paddingteu bisa). Dina 4.2, kami parantos nambihan utilitas margin négatip pikeun unggal ukuran integer non-enol anu didaptarkeun di luhur (contona, 1, 2, 3, 4, 5). Utiliti ieu idéal pikeun ngaropéa talang kolom grid dina titik putus.

Sintaksisna ampir sami sareng standar, utilitas margin positif, tapi ditambah nsateuacan ukuran anu dipénta. Ieu conto kelas anu sabalikna tina .mt-1:

.mt-n1 {
  margin-top: -0.25rem !important;
}

Ieu conto nyaluyukeun grid Bootstrap dina titik putus sedeng ( md) sareng di luhur. Urang geus ngaronjat .colpadding kalawan .px-md-5lajeng counteracted yén kalawan .mx-md-n5on indungna .row.

Padding kolom custom

<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>