Wie kann ich zwischen zwei Schaltflächen in derselben Abteilung Platz schaffen?

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

Im Moment berühren sich die Tasten:

<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 in btn-toolbareinen anderen Behälter oder nicht btn-group. btn-groupverbindet sie zusammen. Weitere Informationen zur Bootstrap- Dokumentation .

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

In Bootstrap 4 müssen Sie Ihren Gruppen mithilfe von Dienstprogrammklassen wie mx-2 einen entsprechenden Rand hinzufügen.

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

<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 den Abstand für Bootstrap verwenden und benötigen kein zusätzliches CSS. Fügen Sie einfach die Klassen zu Ihren Schaltflächen hinzu. Dies ist für Version 4.

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 die Marge.

Wo Sie tun können:

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

ODER

button{
  margin: 13px;
}

Was Dragan B vorgeschlagen hat, ist der richtige Weg für Bootstrap 4. Ich habe unten ein Beispiel aufgeführt. zB mr-3 ist randrecht: 1rem! wichtig

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

Ich habe das Plugin für die Bootstrap 4-Schaltflächen ( https://getbootstrap.com/docs/4.0/components/buttons/#button-plugin ) verwendet und die auf die Beschriftungen gerundete Klasse und die Klasse mx-1 auf die mittlere Schaltfläche hinzugefügt , um das zu erreichen gewünschtes Erscheinungsbild separater Optionsfelder. Mit der Klasse btn-toolbar wurden die Optionsfeldkreise für mich angezeigt , was nicht das war, was ich wollte. Hoffe das hilft jemandem.

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

Eine andere Möglichkeit, dies zu erreichen, besteht darin, Ihren Schaltflächen eine Klasse .btn-space hinzuzufügen

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

und definieren Sie diese Klasse wie folgt

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

Ich bin tatsächlich auf die gleiche Anforderung gestoßen. Ich habe einfach so eine CSS-Überschreibung verwendet

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

Wenn Sie Bootstrap verwenden, können Sie Folgendes ändern: Wenn Sie nur auf einer Seite möchten, fügen Sie zwischen den Kopf-Tags .btn-group btn {margin-right: 1rem;} hinzu.

Wenn ist für alle Website zur CSS-Datei hinzufügen

Am Ende habe ich etwas Ähnliches gemacht wie Mark Dibe , aber ich musste den Abstand auf eine etwas andere Art und Weise herausfinden.

Die col-xKlassen in Bootstrap können ein absoluter Lebensretter sein. Am Ende habe ich etwas Ähnliches gemacht:

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

Dadurch konnte ich Titel und Eingabeschalter in einem schönen Abstand ausrichten. Die gleiche Idee kann auf die Schaltflächen angewendet werden, sodass Sie verhindern können, dass sich die Schaltflächen berühren.

(Randnotiz: Ich wollte, dass dies ein Kommentar zum obigen Link ist, aber mein Ruf ist nicht hoch genug.)