Wie kann ich zwischen zwei Schaltflächen im selben div Platz schaffen?

Was ist der beste Weg, um Bootstrap-Schaltflächen horizontal zu platzieren?

Im Moment berühren sich die Knöpfe:

<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 zeigt das Problem: http://jsfiddle.net/hhimanshu/sYLRq/4/

Legen Sie sie hinein btn-toolbar oder ein anderer Behälter, nicht btn-group. btn-group verbindet sie miteinander. Weitere Informationen zu Bootstrap Dokumentation.

Bearbeiten: Die ursprüngliche Frage war für Bootstrap 2.x, aber das Gleiche gilt immer noch für Bootstrap 3 und Bootstrap 4.

Im Bootstrap 4 Sie müssen Ihren Gruppen mithilfe von Utility-Klassen wie mx-2 einen angemessenen Spielraum hinzufügen.

Setzen Sie die Schaltflächen einfach in eine Klasse ( class=”btn-toolbar” ), wie von Bruder Miroslav Popovic gesagt. Es funktioniert großartig.

<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>

Sie können verwenden Abstand für Bootstrap und kein zusätzliches CSS erforderlich. Fügen Sie einfach die Klassen zu Ihren Schaltflächen hinzu. Dies ist für Version 4.

Was Dragan B vorgeschlagen hat, ist der richtige Weg für Bootstrap 4. Ich habe unten ein Beispiel aufgeführt. zB mr-3 ist margin-right: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: In meinem Fall wollte ich, dass meine Schaltflächen rechts auf dem Bildschirm angezeigt werden und daher nach rechts gezogen werden.

Sie sollten Bootstrap v.4 verwenden

<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>

Der einfachste Weg in den meisten Situationen ist Marge.

Wo können Sie tun:

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

ODER

button{
  margin: 13px;
}

Dragan B. Lösung ist richtig. In meinem Fall brauchte ich einen vertikalen Abstand der Schaltflächen beim Stapeln, also fügte ich ihnen die Eigenschaft mb-2 hinzu.

<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>