Ich möchte einen Abstand zwischen Schaltflächen angeben. Es gibt eine Möglichkeit, den Abstand mithilfe von Bootstrap anzugeben, damit sie für verschiedene Bildschirmauflösungen konsistent sind.
Ich habe es mit margin-left
versucht. Aber ist dies der richtige Weg?
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;
}
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;
}
Sie können dies mit dem Bootstrap Spacing erreichen. Der Bootstrap-Abstand enthält eine große Auswahl an abkürzenden, kurzen Kanten und Polsterungen. Im Beispiel mr-1
setzen Sie margin
oder padding
auf $spacer
* .25.
Beispiel:
<button class="btn btn-outline-primary mr-1" href="#">Sign up</button>
<button class="btn btn-outline-primary" href="#">Login</button>
Lesen Sie mehr Bootstrap Sapcing .
class='col-xs-3'
(zum Beispiel).class="btn-block"
zu Ihren Schaltflächen hinzu. Dies ergibt einen permanenten Abstand.
Wenn Sie einen Rand verwenden möchten, entfernen Sie die Klasse von jeder Schaltfläche und verwenden Sie den: 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;
}
Verwenden Sie btn-primary-spacing
class für alle Schaltflächen, um margin-left
class zu entfernen
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;
}
Hängt davon ab, wie viel Platz Sie wünschen. Ich bin mir nicht sicher, ob ich mit der Logik einverstanden bin, zwischen jedem ein "col-XX-1" einzufügen, da Sie dann jeweils eine komplette "Spalte" definieren.
Wenn Sie nur "etwas Abstand" zwischen den einzelnen Schaltflächen haben möchten, füge ich die Umrandung gerne hinzu. Auf diese Weise kann ich weiterhin alle 12 Spalten verwenden, wobei zwischen den einzelnen Schaltflächen ein Leerzeichen eingefügt wird.
Bootply: http://www.bootply.com/ugeXrxpPvD
Sie können die integrierten Abstände von Bootstrap verwenden, um dort kein zusätzliches CSS zu benötigen. Dies ist für Bootstrap 4.
Durch das Hinzufügen von Rändern zu einer Schaltfläche wird die Schaltfläche breiter, sodass die Schaltflächen für die Zeilen 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.
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.
Der Originalcode ist meistens vorhanden, aber Sie brauchen btn-group
s 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 kein BS4 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>