Come impostare la spaziatura tra i pulsanti utilizzando il bootstrap

Question

Voglio dare spaziatura tra i pulsanti C'è un modo per dare spaziatura utilizzando il bootstrap in modo che siano coerenti per diverse risoluzioni dello schermo.

Ho provato a utilizzare margin-left Ma è il modo corretto di farlo. ??

Ecco il codice HTML demo

:

<div class="btn-toolbar text-center well"> 
    <button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2 margin-left"> 
     <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> ADD PACKET 
    </button> 
    <button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2 margin-left"> 
     <span class="glyphicon glyphicon-edit" aria-hidden="true"></span> EDIT CUSTOMER 
    </button> 
    <button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2 margin-left"> 
     <span class="glyphicon glyphicon-time" aria-hidden="true"></span> HISTORY 
    </button> 
    <button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2 margin-left"> 
     <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> DELETE CUSTOMER 
    </button> 
</div> 

CSS:

.margin-left{ 
    margin-left: 80px !important; 
} 

Answer 1

utilizzando bootstrap è possibile aggiungere <div class="col-sm-1 col-xs-1 col-md-1 col-lg-1"></div> tra i pulsanti.

Answer 2

Dipende dalla quantità di spazio che si desidera. Non sono sicuro di essere d'accordo con la logica di aggiungere una "col-XX-1" tra ciascuna di esse, perché in questo modo definirai un'intera "colonna" tra ognuna di esse.

Se si desidera solo "una piccola spaziatura" tra ogni pulsante, mi piace aggiungere padding alla riga che comprende. In questo modo, posso ancora utilizzare tutte e 12 le colonne, includendo uno "spazio" tra ogni pulsante.

Bootply: http://www.bootply.com/ugeXrxpPvD

Answer 3

1. avvolgere i pulsanti in un div con class='col-xs-3' (per esempio).
2. Aggiungi class="btn-block" ai tuoi pulsanti.

Ciò fornirà una spaziatura permanente.

Answer 4

HTML:

<input id="id_ok" class="btn btn-space" value="OK" type="button"> 
<input id="id_cancel" class="btn btn-space" value="Cancel" type="button"> 

CSS:

.btn-space { 
    margin-right: 5px; 
} 

Answer 5

Usa btn-primary-spacing classe per tutti i pulsanti rimuovere margin-left classe

Esempio:

<button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2 btn-primary-spacing"> 
    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> ADD PACKET 
</button> 

CSS sarà come:

.btn-primary-spacing 
{ 
margin-right: 5px; 
margin-bottom: 5px !important; 
} 

Answer 6

Se si desidera utilizzare il margine, rimuovere la classe su ogni pulsante e utilizzare : last-child selettore CSS.

Html:

<div class="btn-toolbar text-center well"> 
    <button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2"> 
     <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> ADD PACKET 
    </button> 
    <button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2"> 
     <span class="glyphicon glyphicon-edit" aria-hidden="true"></span> EDIT CUSTOMER 
    </button> 
    <button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2"> 
     <span class="glyphicon glyphicon-time" aria-hidden="true"></span> HISTORY 
    </button> 
    <button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2"> 
     <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> DELETE CUSTOMER 
    </button> 
</div> 

Css:

.btn-toolbar .btn{ 
    margin-right: 5px; 
} 
.btn-toolbar .btn:last-child{ 
    margin-right: 0; 
} 

Answer 7

È possibile utilizzare built-in spacing from Bootstrap senza necessità di ulteriore CSS lì. Questo è per Bootstrap 4.

Answer 8

L'aggiunta di margini a un pulsante lo rende più ampio in modo che i pulsanti si adattino al sistema di griglia. Se solo un effetto visivo è importante, assegna al pulsante un bordo bianco con [style = "margin: 0px; border: solid white;"] Ciò non modifica la larghezza del pulsante.

Answer 9

Il codice originale è per lo più lì, ma è necessario btn-group s attorno a ciascun pulsante. In Bootstrap 3 puoi usare una btn-toolbar e un btn-group per portare a termine il lavoro; Non ho fatto BS4 ma ha costrutti simili.

<div class="btn-toolbar" role="toolbar"> 
    <div class="btn-group" role="group"> 
    <button class="btn btn-default">Button 1</button> 
    </div> 
    <div class="btn-group" role="group"> 
    <button class="btn btn-default">Button 2</button> 
    </div> 
</div>