Come utilizzare le classi Spacing Utility in Bootstrap 4

In questo articolo ho visto Bootstrap 4 Spacing Classi, e usa mb-lg in className .

 

Ma quando lo uso su meteorj con reactjs non succede nulla. Mi manca qualcosa o manca un plugin?

 

Login

New to Arcademy? Sign up now.

Fare riferimento alla documentazione Spaziatura (Bootstrap v4 alpha).

Le classi sono denominate utilizzando il formato: {property}-{sides}-{size}

Dove la dimensione è una delle seguenti: * 0 – per le classi che eliminano il margin o il padding impostandolo su 0 * 1 – (per impostazione predefinita) per le classi che impostano il margine o il riempimento su $spacer-x o $spacer-y * 2 – (per impostazione predefinita) per le classi che impostano il margine o il riempimento su $spacer-x * 1.5 o $spacer-y * 1.5 * 3 – (per impostazione predefinita) per le classi che impostano il margine o il riempimento su $spacer-x * 3 o $spacer-y * 3 .

Quindi usa mt-3 invece di mt-lg .

Aggiornamento 2018 Bootstrap 4

Le utilità di spaziatura Bootstrap 4 sono cambiate rispetto alla risposta originale (per v4 alpha). Ora la syntax è semplicemente:

  • margini: m {lati} – {dimensioni}
  • riempimento: p {lati} – {dimensione}

Esempi ..

mb-2 = margine 2 unità di spaziatura inferiori
m-0 = nessun margine
pt-3 = imbottitura superiore 3 unità di spaziatura
p-1 = imbottitura di tutti i lati 1 unità di spaziatura

Ora ci sono 6 dimensioni (0-6) che rappresentano una parte dell’unità standard distanziale .5rem . Inoltre, sono stati aggiunti gli utilit dell’asse x (sinistra / destra) e dell’asse y (superiore / inferiore):

my-2 = margine superiore e inferiore 2 unità di spaziatura
mx-0 = nessun margine sinistro e destro
px-3 = imbottitura sinistra e destra 3 unità di spaziatura

E le utilità di spaziatura ora sono reattive. Il punto di rottura xs più piccolo è implicito quando non viene utilizzato alcun punto di interruzione.

  • margini: m {lati} – {punto di interruzione} – {dimensione}
  • riempimento: p {lati} – {breakpoint} – {dimensione}

mt-md-2 = margine superiore 2 unità di spaziatura, su md (e su)
py-sm-0 = no padding superiore e inferiore, su sm (e su)

Demo di Bootstrap 4 Spaces Utils


Correlati: bug di spaziatura Bootstrap 4?

Fondamentalmente funziona solo da 0 a 3. mt-0, mt-1, mt-2 o mt-3