in English

Gilay-on

Ang Bootstrap naglakip sa usa ka halapad nga mga shorthand responsive margin ug padding utility nga mga klase aron usbon ang hitsura sa usa ka elemento.

Giunsa kini paglihok

I-assign ang responsive-friendly margino paddingvalues sa usa ka elemento o subset sa mga kilid niini nga adunay mga shorthand classes. Naglakip sa suporta alang sa indibidwal nga mga kabtangan, tanan nga mga kabtangan, ug bertikal ug pinahigda nga mga kabtangan. Ang mga klase gitukod gikan sa usa ka default nga mapa sa Sass gikan sa .25remhangtod sa 3rem.

Notasyon

Ang spacing utilities nga magamit sa tanang breakpoints, gikan xsngadto sa xl, walay breakpoint abbreviation niini. Kini tungod kay kana nga mga klase gipadapat gikan min-width: 0ug pataas, ug sa ingon dili gigapos sa usa ka pangutana sa media. Ang nahabilin nga mga breakpoint, bisan pa, naglakip sa usa ka breakpoint abbreviation.

Ang mga klase ginganlan gamit ang pormat {property}{sides}-{size}para xsug {property}{sides}-{breakpoint}-{size}para sa sm, md, lg, ug xl.

Kung ang kabtangan usa sa:

m- alang sa mga klase nga gitakdamargin
p- alang sa mga klase nga gitakdapadding

Diin ang mga kilid usa sa:

t- para sa mga klase nga nagtakda margin-topopadding-top
b- para sa mga klase nga nagtakda margin-bottomopadding-bottom
l- para sa mga klase nga nagtakda margin-leftopadding-left
r- para sa mga klase nga nagtakda margin-rightopadding-right
x- alang sa mga klase nga nagtakda sa duha *-leftug*-right
y- alang sa mga klase nga nagtakda sa duha *-topug*-bottom
blangko - alang sa mga klase nga nagbutang usa margino paddingsa tanan nga 4 nga kilid sa elemento

Diin ang gidak-on usa sa:

0- alang sa mga klase nga nagwagtang sa margino paddingpinaagi sa pag-set niini sa0
1- (pinaagi sa default) alang sa mga klase nga nagtakda sa margino paddingsa$spacer * .25
2- (pinaagi sa default) alang sa mga klase nga nagtakda sa margino paddingsa$spacer * .5
3- (pinaagi sa default) alang sa mga klase nga nagtakda sa margino paddingsa$spacer
4- (pinaagi sa default) alang sa mga klase nga nagtakda sa margino paddingsa$spacer * 1.5
5- (pinaagi sa default) alang sa mga klase nga nagtakda sa margino paddingsa$spacer * 3
auto- para sa mga klase nga nagbutang sa marginauto

(Mahimo nimong idugang ang daghang mga gidak-on pinaagi sa pagdugang mga entri sa $spacersvariable sa mapa sa Sass.)

Mga pananglitan

Ania ang pipila ka representante nga mga pananglitan niini nga mga klase:

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

Horizontal nga pagsentro

Dugang pa, ang Bootstrap naglakip usab sa usa ka .mx-autoklase alang sa horizontally centering fixed-width block level content—nga mao, content nga adunay display: blockug usa ka widthset—pinaagi sa pag-set sa horizontal margins ngadto sa auto.

Nakasentro nga elemento

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

Negatibo nga margin

Sa CSS, marginang mga kabtangan mahimong mogamit sa negatibo nga mga kantidad ( paddingdili mahimo). Sa 4.2, gidugang namo ang negatibong margin utilities para sa matag non-zero integer nga gidak-on nga gilista sa ibabaw (pananglitan, 1, 2, 3, 4, 5). Kini nga mga utilities maayo alang sa pag-customize sa grid column gutters sa mga breakpoints.

Ang syntax halos pareho sa default, positibo nga margin utilities, apan uban ang pagdugang sa nwala pa ang gihangyo nga gidak-on. Ania ang usa ka pananglitan nga klase nga sukwahi sa .mt-1:

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

Ania ang usa ka pananglitan sa pag-customize sa Bootstrap grid sa medium ( md) breakpoint ug pataas. Gidugangan namon ang .colpadding .px-md-5ug dayon gikontra kana .mx-md-n5sa ginikanan .row.

Custom nga column padding

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