Come posso fare spazio tra due pulsanti nello stesso div?

Qual è il modo migliore per spaziare orizzontalmente i pulsanti Bootstrap?

Al momento i pulsanti si toccano:

<div class="btn-group">
    <button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
        <i class="icon-in-button"></i>  
        Add to list
        <span class="caret"/>
    </button>
    <ul class="dropdown-menu">
        <li>
            <a href="#">here</a>
        </li>
        <li>
            <a href="#">new</a>
        </li>
    </ul>
    <button class="btn btn-info">
        <i class="icon-in-button"></i>  
        more
    </button>
</div>

jsfiddle mostra il problema: http://jsfiddle.net/hhimanshu/sYLRq/4/

Mettili dentro btn-toolbaro in qualche altro contenitore, no btn-group. btn-groupli unisce. Maggiori informazioni sulla documentazione Bootstrap .

Modifica: la domanda originale era per Bootstrap 2.x, ma lo stesso vale ancora per Bootstrap 3 e Bootstrap 4 .

In Bootstrap 4 dovrai aggiungere un margine adeguato ai tuoi gruppi usando le classi di utilità, come mx-2.

Metti semplicemente i pulsanti in una classe (class = "btn-toolbar") come raccontato dal fratello Miroslav Popovic. Funziona alla grande.

<div class="btn-toolbar">
  <button type="button" id="btnSubmit" class="btn btn-primary btn-sm">Submit</button>
  <button type="button" id="btnCancel" class="btn btn-primary btn-sm">Cancel</button>
</div>

È possibile utilizzare la spaziatura per Bootstrap e non è necessario alcun CSS aggiuntivo. Aggiungi le classi ai tuoi pulsanti. Questo è per la versione 4.

dovresti usare bootstrap v.4

<div class="form-group row">
    <div class="col-md-6">
        <input type="button" class="btn form-control" id="btn1">
    </div>
    <div class="col-md-6">
        <input type="button" class="btn form-control" id="btn2">
    </div>
</div>

Quello che Dragan B ha suggerito è la strada giusta da seguire per Bootstrap 4. Ho messo un esempio qui sotto. es. mr-3 ha margine destro: 1rem! important

<div class="btn-toolbar pull-right">
   <button type="button" class="btn mr-3">btn1</button>
   <button type="button" class="btn mr-3">btn2</button>
   <button type="button" class="btn">btn3</button>
</div>

ps: nel mio caso volevo che i miei pulsanti fossero visualizzati a destra dello schermo e quindi a destra.

Il modo più semplice nella maggior parte delle situazioni è il margine.

Dove puoi fare:

button{
  margin: 13px 12px 12px 10px;
}

O

button{
  margin: 13px;
}

Ho usato il plug-in Bootstrap 4 pulsanti ( https://getbootstrap.com/docs/4.0/components/buttons/#button-plugin ) e ho aggiunto la classe arrotondata alle etichette e la classe mx-1 al pulsante centrale per ottenere il aspetto desiderato dei pulsanti di opzione separati. Usando la classe btn-toolbar ho fatto apparire per me i cerchi dei pulsanti di opzione che non era quello che volevo. Spero che questo aiuti qualcuno.

        <div class="btn-group btn-group-toggle" data-toggle="buttons">
            <label class="btn btn-secondary active rounded">
                <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
            </label>
            <label class="btn btn-secondary rounded mx-1">
                <input type="radio" name="options" id="option2" autocomplete="off"> Radio
            </label>
            <label class="btn btn-secondary rounded">
                <input type="radio" name="options" id="option3" autocomplete="off"> Radio
            </label>
        </div>

Un altro modo per raggiungere questo obiettivo è aggiungere una classe .btn-space nei pulsanti

  <button type="button" class="btn btn-outline-danger btn-space"
  </button>
  <button type="button" class="btn btn-outline-primary btn-space"
  </button>

e definire questa classe come segue

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

In realtà ho incontrato lo stesso requisito. Ho semplicemente usato l'override CSS in questo modo

.navbar .btn-toolbar { margin-top: 0; margin-bottom: 0 }

se usi Bootstrap, puoi cambiare con uno stile come: Se vuoi solo in una pagina, quindi tra i tag head aggiungi .btn-group btn {margin-right: 1rem;}

Se è per tutto il sito Web, aggiungere al file CSS

La soluzione di Dragan B. è corretta. Nel mio caso avevo bisogno che i pulsanti fossero distanziati verticalmente durante l'impilamento, quindi ho aggiunto loro la proprietà mb-2.

<div class="btn-toolbar">
   <button type="button" class="btn btn-primary mr-2 mb-2">First</button>
   <button type="button" class="btn btn-primary mr-2 mb-2">Second</button>
   <button type="button" class="btn btn-primary mr-2 mb-2">Third</button>
</div>

Ho finito per fare qualcosa di simile a ciò che Mark Dibe ha fatto, ma avevo bisogno di capire la distanza per un modo leggermente diverso.

Le col-xclassi in bootstrap possono essere un vero toccasana. Ho finito per fare qualcosa di simile a questo:

<div class="row col-12">
    <div class="col-3">Title</div>
</div>
<div class="row col-12">
    <div class="col-3">Bootstrap Switch</div>
<div>

Ciò mi ha permesso di allineare titoli e input switch in modo ben distanziato. La stessa idea può essere applicata ai pulsanti e consente di impedire ai pulsanti di toccarsi.

(Nota a margine: volevo che questo fosse un commento sul link sopra, ma la mia reputazione non è abbastanza alta)