wake-up-neo.com

Wie kann ich Platz zwischen zwei Schaltflächen in einem div 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>

 Two Bootstrap buttons

jsfiddle zeigt das Problem: http://jsfiddle.net/hhimanshu/sYLRq/4/

htmlcsstwitter-bootstrap
129
daydreamer

Fügen Sie sie in btn-toolbar oder einem anderen Container ein, nicht btn-group. btn-group fügt sie zusammen. Weitere Informationen zu Bootstrap Dokumentation .

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

In Bootstrap 4 müssen Sie mithilfe von Dienstprogrammklassen (z. B. mx-2) einen angemessenen Rand zu Ihren Gruppen hinzufügen.

275
Miroslav Popovic

Fügen Sie einfach die Schaltflächen in eine Klasse ein (class = "btn-toolbar"), wie von Bro 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>

62
Manmohan

Sie können spacing 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.

6
Dragan B.

Der einfachste Weg in den meisten Situationen ist Marge.

Wo können Sie tun:

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

OR

button{
  margin: 13px;
}
3
Gammer

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>
2
mark dibe

Ich habe das Bootstrap 4 Buttons-Plugin ( https://getbootstrap.com/docs/4.0/components/buttons/#button-plugin ) Verwendet und die Klasse abgerundet zu den Labels und dem hinzugefügt klasse mx-1 auf die mittlere Schaltfläche, um das gewünschte Erscheinungsbild der einzelnen Optionsfelder zu erreichen. Durch die Verwendung der Klasse btn-toolbar wurde der Radioknopf für mich als Kreis dargestellt, was ich nicht 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>
2
Jonathan

Eine andere Möglichkeit, dies zu erreichen, ist das Hinzufügen einer Klasse .btn-space zu Ihren Schaltflächen

  <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;
}
1
Swapnil

Was von Dragan B vorgeschlagen wurde, ist der richtige Weg für Bootstrap 4. Ich habe ein Beispiel unten aufgeführt. z.B. Herr-3 ist rechtsseitig: 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 vom Bildschirm angezeigt werden und damit rechts nach rechts gezogen werden. 

1
mrana

Ich bin eigentlich auf die gleiche Anforderung gestoßen. Ich habe einfach so CSS-Überschreibung verwendet

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

Am Ende tat ich etwas Ähnliches wie mark dibe , aber ich musste den Abstand auf eine etwas andere Weise herausfinden.

Die Klassen col-x 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 zueinander ausrichten. Dieselbe 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.)

0
Conrad37

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

Wenn für alle die Website zu CSS-Datei hinzufügen

0
Vicente Niclos