Aggiungi spazi bianchi verticali usando Twitter Bootstrap?

Qual è il modo migliore per aggiungere spazi bianchi verticali usando Bootstrap di Twitter?

Ad esempio, supponiamo che sto creando una landing page e vorrei un po '(100px) di spazi bianchi sopra e sotto un determinato pulsante. Ovviamente, potrei creare una certa classe per quel particolare pulsante. Ma, penso che Bootstrap dovrebbe avere un modo DRY di aggiungere spazi vuoti verticali.

In Bootstrap 4 ci sono utility di spaziatura .

Citando la documentazione per la notazione usata :

Le utilità di spaziatura che si applicano a tutti i punti di interruzione, da xsa xl, non contengono abbreviazioni di punto di interruzione. Questo perché tali classi vengono applicate da min-width: 0e verso l'alto e quindi non sono vincolate da una query multimediale. I punti di interruzione rimanenti, tuttavia, includono un'abbreviazione di punto di interruzione.

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

Dove la proprietà è una di:

• m - per le classi impostate margin
• p - per le classi impostate padding

Dove lati è uno dei:

• t- per le classi che impostano margin-topopadding-top
• b- per le classi che impostano margin-bottomopadding-bottom
• l- per le classi che impostano margin-leftopadding-left
• r- per le classi che impostano margin-rightopadding-right
• x- per le classi che impostano sia *-lefte*-right
• y- per le classi che impostano sia *-tope*-bottom
• vuoto - per le classi che impostano un margino paddingsu tutti e 4 i lati dell'elemento

Dove la dimensione è una di:

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

Quindi per avere uno spazio verticale extra sopra e sotto un elemento dovresti usare la my-5classe.

In v2, non c'è nulla di incorporato per lo spazio verticale, quindi ti consigliamo di seguire una classe personalizzata. Per altezze più piccole, di solito lancio <div class="control-group">un pulsante.

Il wrapping funziona ma quando vuoi solo uno spazio, mi piace:

<div class="col-xs-12" style="height:50px;"></div>

Mi dispiace scavare una vecchia tomba qui, ma perché non farlo?

<div class="form-group">
    &nbsp;
</div>

Aggiungerà uno spazio l'altezza di un normale elemento di forma.

Sembra che circa 1 riga su un modulo sia approssimativamente 50px (47px sul mio elemento che ho appena ispezionato). Questa è una forma orizzontale, con etichetta a sinistra 2col e input a destra 10col. Quindi i tuoi pixel possono variare.

Dato che il mio è fondamentalmente 50px, creerei un distanziatore alto 50px senza margini o imbottitura;

.spacer { margin:0; padding:0; height:50px; }
<div class="spacer"></div>

So che è vecchio, ma sono venuto qui alla ricerca della stessa cosa, ho scoperto che Bootstrap ha il blocco della guida, molto utile per queste situazioni:

<div class="help-block"></div>

Per la versione 3 non sembra esserci un modo "bootstrap" per raggiungere questo obiettivo.

A panel, a welle a form-groupforniscono una spaziatura verticale.

Una soluzione di spaziatura verticale specifica più formale è, a quanto pare, sulla tabella di marcia per bootstrap v4

https://github.com/twbs/bootstrap/issues/4286#issuecomment-36331550 https://github.com/twbs/bootstrap/issues/13532

Ho semplicemente creato una classe div usando varie altezze, ad es

<div class="divider-10"></div>

Il CSS è:

.divider-10 {
    width:100%; 
    min-height:1px; 
    margin-top:10px; 
    margin-bottom:10px;  
    display:inline-block; 
    position:relative;
}

Basta creare una classe di divisione per qualsiasi altezza siano necessari.

Il mio trucco. Non elegante, ma funziona:

<p>&nbsp;</p>

Basta usare <br/>. Mi sono trovato qui a cercare la risposta a questa domanda e poi mi sono sentito un po 'sciocco per non aver pensato di usare una semplice interruzione di riga come suggerito dall'utente JayKilleen in un commento.

So che questo è vecchio e ci sono già molte buone soluzioni già pubblicate, ma una soluzione semplice che ha funzionato per me è il seguente CSS

<style>
  .divider{
    margin: 0cm 0cm .5cm 0cm;
  }
</style>

e quindi creare un div nel tuo HTML

<div class="divider"></div>

Ho provato a usare <div class="control-group">e non ha cambiato il mio layout. Non ha aggiunto spazio verticale. La soluzione che ha funzionato per me è stata:

<ol style="visibility:hidden;"></ol>

Se ciò non ti dà abbastanza spazio verticale, puoi ottenere incrementalmente di più aggiungendo <li>&nbsp;</li>tag nidificati .

<form>
 <fieldset class="form-group"><input type="text" class="form-control" placeholder="Input"/></fieldset>
 <fieldset class="form-group"><button class="btn btn-primary"/>Button</fieldset>
</form>

http://v4-alpha.getbootstrap.com/components/forms/#form-controls

Non c'è niente di più ASCIUTTO di

.btn {
    margin-bottom:5px;
}