webentwicklung-frage-antwort-db.com.de

So geben Sie den Abstand zwischen Schaltflächen mithilfe von Bootstrap ein

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;
}
htmlcsstwitter-bootstrap
45
vaibhav jain

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;
}
51
Sergey Chepurnov

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 .

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

Dies ergibt einen permanenten Abstand.

12
Alex Khlebaev

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;
}
9
Thibaud Granier

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

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

3
ganders

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. 

2
Dragan B.

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.

1
Theo Knoops

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.

0
Joaquin Oscar Ibar

Der Originalcode ist meistens vorhanden, aber Sie brauchen 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 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>
0
Mike K