So geben Sie mithilfe des Bootstraps einen Abstand zwischen den Schaltflächen ein

Ich möchte den Abstand zwischen den Schaltflächen angeben. Gibt es eine Möglichkeit, den Abstand mithilfe des Bootstraps festzulegen, damit sie für verschiedene Bildschirmauflösungen konsistent sind?

Ich habe versucht, margin-leftAber ist es der richtige Weg, dies zu tun?

Hier ist die Demo

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

Sie können dies mithilfe des Bootstrap- Abstands erreichen . Der Bootstrap-Abstand umfasst eine breite Palette an reaktionsschnellen Rand- und Polsterungen. Stellen Sie im folgenden Beispiel mr-1das marginoder paddingauf $spacer* .25 ein.

Beispiel:

<button class="btn btn-outline-primary mr-1" href="#">Sign up</button>
<button class="btn btn-outline-primary" href="#">Login</button>

Weitere Informationen finden Sie unter Bootstrap-Abstand .

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

1. Wickeln Sie Ihre Schaltflächen in ein div mit class='col-xs-3'(zum Beispiel).
2. Fügen Sie class="btn-block"Ihren Schaltflächen hinzu.

Dies sorgt für einen dauerhaften Abstand.

Wenn Sie margin verwenden möchten, entfernen Sie die Klasse auf jeder Schaltfläche und verwenden Sie : last-child CSS-Selektor.

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

Kommt darauf an, wie viel Platz du willst. Ich bin mir nicht sicher, ob ich der Logik zustimme, zwischen jedem ein "col-XX-1" einzufügen, da Sie dann zwischen jedem eine ganze "Spalte" definieren.

Wenn Sie nur "einen kleinen Abstand" zwischen den einzelnen Schaltflächen wünschen, füge ich der umschließenden Zeile gerne eine Auffüllung hinzu. Auf diese Weise kann ich weiterhin alle 12 Spalten verwenden und zwischen den einzelnen Schaltflächen ein "Leerzeichen" einfügen.

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

Verwenden btn-primary-spacingKlasse für alle Tasten entfernen margin-leftKlasse

Beispiel:

<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 wird wie folgt aussehen:

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

Sie können den integrierten Abstand von Bootstrap verwenden, sodass dort kein zusätzliches CSS erforderlich ist. Dies ist für Bootstrap 4.

Durch Hinzufügen von Rändern zu einer Schaltfläche wird diese breiter, sodass die Schaltflächen in das Rastersystem passen. Wenn nur ein visueller Effekt wichtig ist, geben Sie der Schaltfläche einen weißen Rand mit [style = "margin: 0px; border: solid white;"]. Dadurch bleibt die Tastenbreite unberührt.

Der ursprüngliche Code ist meistens vorhanden, aber Sie benötigen btn-groups um jede Schaltfläche. In Bootstrap 3 können Sie eine BTN-Symbolleiste und eine BTN-Gruppe verwenden, um die Aufgabe zu erledigen. Ich habe BS4 nicht gemacht, aber es hat ähnliche Konstrukte.

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

Ich bin ziemlich schlecht in HTML, aber ich habe  zwischen den Schaltflächen verwendet und es hat gut funktioniert.

Mit Bootstrap können Sie <div class="col-sm-1 col-xs-1 col-md-1 col-lg-1"></div>zwischen Schaltflächen hinzufügen .