Aggiungere uno spacer semplice a twitter bootstrap

Question

Sto utilizzando twitter-bootstrap, con LESS and Rails.

Voglio aggiungere un semplice spaziatore al mio css che appare tra le righe della griglia per distanziare un po 'le cose. Non sono riuscito a trovare nulla nel bootstrap che lo fa per me quindi ho pensato di aggiungere un div spacer con un margin-top definito.

ho Stook il seguente codice nel mio file di override bootstrap:

.spacer { margin-top: 40px; } 

ma tutti i margini sembrano gruppo insieme alla parte superiore della pagina e non tra la griglia. Sono sicuro che è un attributo di posizione che mi manca da qualche parte, per favore aiutatemi.

Sono aperto a qualsiasi altro suggerimento su come ottenere meglio questo, o se t-bootstrap ha già qualcosa che ho perso.

Grazie!

Answer 1

È possibile aggiungere una classe a ciascuno dei vostri .row div per aggiungere un po 'di spazio tra di loro in questo modo:

.spacer { 
    margin-top: 40px; /* define margin as you see fit */ 
} 

è possibile utilizzare in questo modo:

<div class="row spacer"> 
    <div class="span4">...</div> 
    <div class="span4">...</div> 
    <div class="span4">...</div> 
</div> 

<div class="row spacer"> 
    <div class="span4">...</div> 
    <div class="span4">...</div> 
    <div class="span4">...</div> 
</div> 

Answer 2

In Bootstrap 4 (è ancora alpha però) è possibile utilizzare classi come mt-5, mb-5.

Secondo il loro sito:

Le classi sono salvati utilizzando il formato {property} {lati} - {size} per xs e {property} {lati} - {breakpoint} - {size} per sm, md, lg e xl.

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

Answer 3

Il mio approccio. Tricky, ma funziona bene per me

<p>&nbsp;</p>