Avanoa

O le Bootstrap e aofia ai le tele o vaega fa'apitoa e tali mai, padding, ma va'a aoga vasega e sui ai foliga o se elemene.

I luga o lenei itulau

Avanoa ma faʻaofuofu

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.

Le fa'aogaina o le CSS Grid layout module? Mafaufau e faaaoga le gap utility nai lo lena.

Notation

Fa'aoga avanoa e fa'aoga i vaega ta'oto uma, mai xsi le xxl, 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, xl, ma xxl.

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
s- (amata) mo vasega e seti margin-leftpe padding-leftile LTR, margin-rightpoʻo padding-rightile RTL
e- (fa'ai'uga) mo vasega o lo'o seti margin-rightpe padding-righti le LTR, margin-leftpo'o padding-leftle RTL
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;
}

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

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 tulaga le lelei ( paddinge le mafai). O nei laina le lelei e le mafai ona faʻaogaina , ae mafai ona faʻaogaina i Sass e ala i le setiina $enable-negative-margins: true.

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

Gap

A fa'aoga display: grid, e mafai ona e fa'aogaina gapmea fa'aoga ile koneteina fa'asologa o matua. Ole mea lea e mafai ona fa'asaoina ile fa'aopoopoina o mea fa'aoga pito ile fa'asologa o mea ta'itasi (tamaiti o se display: gridatigipusa). Gap utilities e tali mai e ala i le faaletonu, ma e gaosia e ala i la matou aoga API, faʻavae i luga o le $spacersfaafanua Sass.

Fa'asologa o mea 1

Fa'asologa o mea 2

Fa'asologa o mea 3

html

<div class="d-grid gap-3">
  <div class="p-2 bg-light border">Grid item 1</div>
  <div class="p-2 bg-light border">Grid item 2</div>
  <div class="p-2 bg-light border">Grid item 3</div>
</div>

Lagolago e aofia ai filifiliga tali mo vaega uma a Bootstrap gridpoints, faʻapea foʻi ma le ono lapopoa mai le $spacersfaʻafanua ( 0- 5). E leai .gap-autose vasega aoga aua e tutusa lelei ma .gap-0.

Sass

Faafanua

Ole fa'aogaina ole avanoa e fa'ailoa ile fa'afanua Sass ona fa'atupuina lea ile matou fa'aoga API.

$spacer: 1rem;
$spacers: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);

Utilities API

O lo'o fa'ailoa mai mea fa'aoga avanoa i totonu o la matou fa'aoga API i scss/_utilities.scss. A'oa'o pe fa'afefea ona fa'aoga mea aoga API.

    "margin": (
      responsive: true,
      property: margin,
      class: m,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-x": (
      responsive: true,
      property: margin-right margin-left,
      class: mx,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-y": (
      responsive: true,
      property: margin-top margin-bottom,
      class: my,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-top": (
      responsive: true,
      property: margin-top,
      class: mt,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-end": (
      responsive: true,
      property: margin-right,
      class: me,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-bottom": (
      responsive: true,
      property: margin-bottom,
      class: mb,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-start": (
      responsive: true,
      property: margin-left,
      class: ms,
      values: map-merge($spacers, (auto: auto))
    ),
    // Negative margin utilities
    "negative-margin": (
      responsive: true,
      property: margin,
      class: m,
      values: $negative-spacers
    ),
    "negative-margin-x": (
      responsive: true,
      property: margin-right margin-left,
      class: mx,
      values: $negative-spacers
    ),
    "negative-margin-y": (
      responsive: true,
      property: margin-top margin-bottom,
      class: my,
      values: $negative-spacers
    ),
    "negative-margin-top": (
      responsive: true,
      property: margin-top,
      class: mt,
      values: $negative-spacers
    ),
    "negative-margin-end": (
      responsive: true,
      property: margin-right,
      class: me,
      values: $negative-spacers
    ),
    "negative-margin-bottom": (
      responsive: true,
      property: margin-bottom,
      class: mb,
      values: $negative-spacers
    ),
    "negative-margin-start": (
      responsive: true,
      property: margin-left,
      class: ms,
      values: $negative-spacers
    ),
    // Padding utilities
    "padding": (
      responsive: true,
      property: padding,
      class: p,
      values: $spacers
    ),
    "padding-x": (
      responsive: true,
      property: padding-right padding-left,
      class: px,
      values: $spacers
    ),
    "padding-y": (
      responsive: true,
      property: padding-top padding-bottom,
      class: py,
      values: $spacers
    ),
    "padding-top": (
      responsive: true,
      property: padding-top,
      class: pt,
      values: $spacers
    ),
    "padding-end": (
      responsive: true,
      property: padding-right,
      class: pe,
      values: $spacers
    ),
    "padding-bottom": (
      responsive: true,
      property: padding-bottom,
      class: pb,
      values: $spacers
    ),
    "padding-start": (
      responsive: true,
      property: padding-left,
      class: ps,
      values: $spacers
    ),
    // Gap utility
    "gap": (
      responsive: true,
      property: gap,
      class: gap,
      values: $spacers
    ),