Bootstrap di Twitter: aggiunge spazio tra le righe

Come aggiungere margine top to class="row" elementi usando il framework di bootstrap di Twitter?

Modificare o sovrascrivere la riga nel bootstrap di Twitter è una ctriggers idea, perché questa è una parte fondamentale dello scaffold delle pagine e avrai bisogno di righe senza un margine superiore.

Per risolvere questo, crea invece una nuova class “top-buffer” che aggiunge il margine standard di cui hai bisogno.

 .top-buffer { margin-top:20px; } 

E poi usalo sulle div di fila dove hai bisogno di un margine superiore.

 
...

Ok, solo per farti sapere cosa è successo poi, ho risolto usando alcune nuove classi come dice Acyra sopra:

 .top5 { margin-top:5px; } .top7 { margin-top:7px; } .top10 { margin-top:10px; } .top15 { margin-top:15px; } .top17 { margin-top:17px; } .top30 { margin-top:30px; } 

ogni volta che voglio faccio

per una migliore risposta puoi aggiungere margin-top:7% invece di 5px per esempio: D

Bootstrap 3

Se hai bisogno di separare le righe nel bootstrap, puoi semplicemente usare .form-group . Questo aggiunge un margine di 15px alla fine della riga.

Nel tuo caso, per ottenere un margine superiore, puoi aggiungere questa class .row precedente

 
/* From bootstrap.css */ .form-group { margin-bottom: 15px; }

Bootstrap 4

Puoi utilizzare le classi di spaziatura incorporate

 

La “t” nel nome della class lo rende applicabile solo al lato “top”, ci sono classi simili per bottom, left, right. Il numero definisce la dimensione dello spazio.

A volte margin-top può causare problemi di progettazione:

http://www.w3.org/TR/CSS2/box.html#collapsing-margins

Quindi, consiglio di creare “classi margin-bottom” invece di “classi margin-top” e applicarle all’elemento precedente.

Se si sta utilizzando l’importazione Bootstrap, i file Bootstrap MENO tentano di definire le classi margin-bottom con spazi tematici Bootstrap proporzionali:

 .margin-bottom-xs {margin-bottom: ceil(@line-height-computed / 4);} .margin-bottom-sm {margin-bottom: ceil(@line-height-computed / 2);} .margin-bottom-md {margin-bottom: @line-height-computed;} .margin-bottom-lg {margin-bottom: ceil(@line-height-computed * 2);} 

Ho aggiunto queste classi al mio foglio di stile bootstrap

 .voffset { margin-top: 2px; } .voffset1 { margin-top: 5px; } .voffset2 { margin-top: 10px; } .voffset3 { margin-top: 15px; } .voffset4 { margin-top: 30px; } .voffset5 { margin-top: 40px; } .voffset6 { margin-top: 60px; } .voffset7 { margin-top: 80px; } .voffset8 { margin-top: 100px; } .voffset9 { margin-top: 150px; } 

Esempio

 

Vertically offset text.

Sto usando queste classi per modificare il margine superiore:

 .margin-top-05 { margin-top: 0.5em; } .margin-top-10 { margin-top: 1.0em; } .margin-top-15 { margin-top: 1.5em; } .margin-top-20 { margin-top: 2.0em; } .margin-top-25 { margin-top: 2.5em; } .margin-top-30 { margin-top: 3.0em; } 

Quando ho bisogno di un elemento per avere una spaziatura 2em dall’elemento sopra, lo uso in questo modo:

 
Something here

Se preferisci pixel, cambia l’em in px per farlo a modo tuo.

Per la distorsione Bootstrap 4 deve essere applicata utilizzando

classi di utilità di stenografia

nel seguente formato:

{proprietà} {lati} – {size}

Dove la proprietà è una delle:

  • m – per le classi che impostano il margine
  • p – per le classi che impostano il padding

Dove i lati è uno di:

  • t – per le classi che impostano margin-top o padding-top
  • b – per le classi che impostano margin-bottom o padding-bottom
  • l – per le classi che impostano margin-left o padding-left
  • r – per le classi che impostano margin-right o padding-right
  • x – per le classi che impostano sia * -left che * -right
  • y – per le classi che impostano sia * -top che * -bottom
  • blank – per le classi che impostano un margine o una spaziatura su tutti e 4 i lati dell’elemento

Dove la dimensione è una delle:

  • 0 – per le classi che eliminano il margine o il padding impostandolo su 0
  • 1 – (per impostazione predefinita) per le classi che impostano il margine o il riempimento su $ spacer * .25
  • 2 – (per impostazione predefinita) per le classi che impostano il margine o il riempimento su $ spacer * .5
  • 3 – (impostazione predefinita) per le classi che impostano il margine o il riempimento su $ spacer
  • 4 – (per impostazione predefinita) per le classi che impostano il margine o il riempimento su $ spacer * 1.5
  • 5 – (per impostazione predefinita) per le classi che impostano il margine o il riempimento su $ spacer * 3
  • auto – per le classi che impostano il margine su auto

Quindi dovresti fare uno di questi:

 
...

Leggi i documenti per ulteriori spiegazioni.

È ansible utilizzare la seguente class per bootstrap 4:

mt-0 mt-1 mt-2 mt-3 mt-4

Rif: https://v4-alpha.getbootstrap.com/utilities/spacing/

Aggiungi a questa class nel file .css:

 .row { margin-left: -20px; *zoom: 1; margin-top: 50px; } 

oppure crea una nuova class e aggiungila all’elemento

 .rowSpecificFormName td { margin-top: 50px; } 

Bootstrap 4 alpha, per margin-top: abbreviazione dei nomi delle classi CSS mt-1, mt-2 (mt-lg-5, mt-sm-2) stesso per il fondo, destra, sinistra, e hai anche auto class ml- auto

  

Le unità vanno da 1 a 5 : in variables.scss che significa che se imposti mt-1 restituisce .25rem di margine superiore.

 $spacers: ( 0: ( x: 0, y: 0 ), 1: ( x: ($spacer-x * .25), y: ($spacer-y * .25) ), 2: ( x: ($spacer-x * .5), y: ($spacer-y * .5) ), 3: ( x: $spacer-x, y: $spacer-y ), 4: ( x: ($spacer-x * 1.5), y: ($spacer-y * 1.5) ), 5: ( x: ($spacer-x * 3), y: ($spacer-y * 3) ) ) !default; 

leggi di più qui

https://v4-alpha.getbootstrap.com/utilities/spacing/#horizontal-centering

Se vuoi cambiare solo su una pagina, aggiungi la seguente regola di stile:

  #myCustomDivID .row { margin-top:20px; } 

In Bootstrap 4 alpha + puoi usare questo

 class margin-bottom-5 

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

 just take a new class beside every row and apply css of margin-top: 20px; here is the code below  

Bootstrap3

CSS (solo gutter, senza margini intorno):

 .row.row-gutter { margin-bottom: -15px; overflow: hidden; } .row.row-gutter > *[class^="col"] { margin-bottom: 15px; } 

CSS (uguale margine intorno a 15px / 2):

 .row.row-margins { padding-top: 7px; /* or margin-top: 7px; */ padding-bottom: 7px; /* or margin-bottom: 7px; */ } .row.row-margins > *[class^="col"] { margin-top: 8px; margin-bottom: 8px; } 

Uso:

 
first
second
third

(con SASS o LESS 15px potrebbe essere una variabile da bootstrap)

puoi aggiungere questo codice:

 [class*="col-"] { padding-top: 1rem; padding-bottom: 1rem; } 

Basta semplicemente usare questo bs3-upgrade per spaziature e algement di testo …

https://github.com/studija/bs3-upgrade

Il mio trucco Non è così pulito, ma funziona bene per me