Avanoa

O le Bootstrap e aofia ai le tele o vaega fa'apitoa e tali mai fa'apu'upu'u ma vasega fa'aoga fa'apipi'i e sui ai foliga o se elemene.

E faapefea ona galue

Tofi tali-faauo marginpo o paddingtulaga faatauaina i se elemene po o se vaega itiiti o ona itu ma vasega pupuu. E aofia ai le lagolago mo meatotino ta'itasi, meatotino uma, ma mea tu'usa'o ma fa'ata'atia. O vasega e fausia mai se fa'afanua fa'aletonu Sass e amata mai .25remi le 3rem.

Notation

Fa'aoga avanoa e fa'aoga i vaega ta'oto uma, mai xsi le xl, e leai se fa'apu'upu'u va'aiga i totonu. E mafua ona o na vasega o loʻo faʻaoga mai min-width: 0ma luga, ma o lea e le o noatia i se fesili a le aufaasālalau. Ae peitai, o vaega o totoe, e aofia ai se faapuupuuga.

O vasega ua faaigoaina e faaaoga ai le faatulagaga {property}{sides}-{size}mo xsma {property}{sides}-{breakpoint}-{size}mo sm, md, lg, ma xl.

Afai o meatotino o se tasi o:

• m- mo vasega ua setiinamargin
• p- mo vasega ua setiinapadding

O fea itu o se tasi o:

• t- mo vasega e seti margin-toppepadding-top
• b- mo vasega e seti margin-bottompepadding-bottom
• l- mo vasega e seti margin-leftpepadding-left
• r- mo vasega e seti margin-rightpepadding-right
• x- mo vasega e seti uma *-leftma*-right
• y- mo vasega e seti uma *-topma*-bottom
• avanoa - mo vasega e seti se marginpo'o paddingluga uma 4 itu o le elemene

Ole tele ole tasi ole:

• 0- mo vasega e aveese le marginpo paddingo le setiina i0
• 1- (e ala i le faaletonu) mo vasega e setiina le marginpo paddingo le$spacer * .25
• 2- (e ala i le faaletonu) mo vasega e setiina le marginpo paddingo le$spacer * .5
• 3- (e ala i le faaletonu) mo vasega e setiina le marginpo paddingo le$spacer
• 4- (e ala i le faaletonu) mo vasega e setiina le marginpo paddingo le$spacer * 1.5
• 5- (e ala i le faaletonu) mo vasega e setiina le marginpo paddingo le$spacer * 3
• auto- mo vasega e setiina le margini le auto

(E mafai ona e faʻaopoopoina le tele o lapopoa e ala i le faʻaopoopoina o faʻamaumauga i le $spacersfesuiaiga o faʻafanua Sass.)

Faataitaiga

O nisi nei o fa'ata'ita'iga fa'atusa o nei vasega:

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

Tutotonuga faalava

E le gata i lea, o le Bootstrap e aofia ai foi ma se .mx-autovasega mo le fa'ata'atiagatonugatonu-lautele poloka tulaga anotusi—o lona uiga, mea o lo'o i ai display: blockma se widthseti-e ala i le setiina o laina fa'alava ile auto.

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

Fa'ailoga le lelei

I totonu o le CSS, margine mafai e meatotino ona fa'aoga tulaga le lelei ( paddinge le mafai). E pei o le 4.2, ua matou fa'aopoopoina mea fa'aoga le lelei mo ta'iala uma e le-zero o lo'o lisiina i luga (fa'ata'ita'iga, 1, 2, 3, 4, 5). O mea aoga nei e fetaui lelei mo le fa'avasegaina o alavai laina laina i luga ole va'aiga.

O le syntax e toetoe lava tutusa ma le fa'aletonu, fa'aoga lelei pito i tua, ae fa'atasi ai ma le fa'aopoopoina na'o le'i o'o i le tele o lo'o talosagaina. O se fa'ata'ita'iga lea o vasega e fa'afeagai ma .mt-1:

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

O se fa'ata'ita'iga lea o le fa'avasegaina o le fa'asologa o le Bootstrap i le va'aiga ( md) vaeluaga ma luga. Ua matou fa'aopoopoina le .colpadding .px-md-5ma ona fa'afeagai lea ma .mx-md-n5le matua .row.

<div class="row mx-md-n5">
  <div class="col py-3 px-md-5 border bg-light">Custom column padding</div>
  <div class="col py-3 px-md-5 border bg-light">Custom column padding</div>
</div>