Avanoa

O le Bootstrap e aofia ai le tele o vaega fa'apipi'i tali ma vasega fa'aoga e fa'aleleia 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, anotusi o lo'o i ai display: blockma se widthseti-e ala i le setiina o laina faalava i le auto.

Elemene ogatotonu

<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 tau le lelei ( paddinge le mafai). E o'o mai i le 4.2, ua matou fa'aopoopoina mea fa'aoga le lelei mo ta'iala uma e le'o-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 o laina laina i luga ole va'aiga.

O le syntax e toetoe lava tutusa ma le faaletonu, faʻaoga lelei pito i tua, ae faʻatasi ai ma le faʻaopoopoga 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.

Fa'aofuofu koluma fa'apitoa

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