(bootstrap) Mantenendo un po 'di spazio verticale tra gli elementi quando si avvolgono?

Question

Utilizzando Bootstrap, quando inserisco un gruppo di elementi (ad esempio i pulsanti) in una riga e riduco la finestra, gli elementi si avvolgono attorno.

Ma mentre c'è uno spazio orizzontale tra gli elementi quando la finestra è abbastanza ampia da contenere tutto l'uno accanto all'altro, verticalmente tutto si blocca insieme, con zero pixel di spazio vuoto in mezzo.

Live example (stretto o allargare la finestra di output per vedere l'effetto)

schermata di esempio:
1. Wide enough, notice space between buttons
2. Wrapping around, notice NO space between the buttons stacked on top of eachother

Credo che avrei potuto pasticciare con qualche CSS personalizzato, aggiungendo margini verticali o quant'altro, ma per mantenere le cose il più possibile compatibili e standard, mi chiedo se c'è un modo migliore o più nativo per risolvere questo problema in un layout Bootstrap?

Answer 1

Cosa accade ecco i pulsanti vengono visualizzati come un blocco in linea e per impostazione predefinita tali elementi non hanno spazi bianchi o margine per cominciare. È possibile utilizzare il metodo seguente per evitare questo.

Ciò che ho fatto è stato aggiungere una classe all'elemento padre dei pulsanti ed ereditare lo stile alla classe "btn".

html

<div class='container'> 
    <div class='row'> 
     <div class='col-xs-12 button-wrapper'> 
      <button class='btn btn-primary'>Lorem ipsum dolor sit amet</button> 
      <button class='btn btn-info'>consectetur adipiscing elit</button> 
      <button class='btn btn-success'>sed do eiusmod tempor incididunt</button> 
     </div> 
    </div> 
</div> 

css

.button-wrapper .btn { 
    margin-bottom:5px; 
} 

Demo

Answer 2

Demo Utilizzare il css con margine inferiore per il pulsante.

.btn{margin-bottom:10px;} 

U può scrivere questo css con il nuovo nome della classe genitore, per evitare il css sopra l'influenza in altre pagine.

Answer 3

Prova in questo modo: Demo

CSS:

@media (max-width: 779px) { 
    .btn{ 
     margin-bottom:10px; 
} 

Answer 4

Controllare il esempio di seguito:

Codice:

.btn { 
 
    margin: 10px auto; 
 
}

<div class='container'> 
 
\t <div class='row'> 
 
     
 
     <div class="col-xs-12 col-sm-4"> 
 
      <button class="btn btn-block btn-primary">Lorem ipsum dolor sit amet</button> 
 
     </div> 
 
     
 
     <div class="col-xs-12 col-sm-4"> 
 
      <button class="btn btn-block btn-info">consectetur adipiscing elit</button> 
 
     </div> 
 
     
 
     <div class="col-xs-12 col-sm-4"> 
 
      <button class="btn btn-block btn-success">sed do eiusmod tempor incididunt</button> 
 
     </div>   
 
     
 
\t </div> 
 
</div>

Example

Answer 5

Con Bootstrap, mi piace sempre fare classi per aggiungere margini superiore e inferiore in questo modo:

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

.bottom5 { margin-bottom:5px; } 
.bottom7 { margin-bottom:7px; } 
.bottom10 { margin-bottom:10px; } 
.bottom15 { margin-bottom:15px; } 
.bottom17 { margin-bottom:17px; } 
.bottom30 { margin-bottom:30px; } 

È facile da ricordare ed è una soluzione rapida per questo problema. Basta aggiungere al tuo file main.css.

Answer 6

Sto usando questo metodo: aggiungere un div con un po 'di spazio in verticale:

<div class="vspace1em"></div> 

css:

div.vspace1em { 
     clear: both; 
     height: 1em; 
    }