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


79

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

Ja, das ist es, oder Sie können col-sm-offset oder ähnliches verwenden
ppascualv

Die Tastengröße sollte unabhängig sein. Werfen Sie einen Blick Jungs (www.bootply.com/dDfIHeZizW), wenn ich die Breite der Schaltflächen ändere, wird ihre Ausrichtung verzerrt.
Vaibhav Jain

Nachdem ##bootstrap IRCich verschiedene Lösungen ausprobiert und Feedback von anderen Jungs erhalten habe, habe ich mich für den Moment entschieden margin-left. Danke Jungs ...
Vaibhav Jain

2
Dies ist die richtige Antwort: stackoverflow.com/a/11216667/670229
brauliobo

Antworten:


100

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 .


10
habe gerade mr-1 und boom hinzugefügt. Danke @ A.Raza.
ImFarhad

7
Dies ist für Bootstrap4
Hassaan

Ja, das ist für "twbs 4.x".
Asif Raza

3
Danke, das habe ich gesucht!
Nahuel Gonzalez

Ist spacerim Bootstrap definiert?
Klammern

66

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
Obwohl es nicht ausdrücklich erwähnt wurde, bedeutete das OP, dass sie Rinnen an Knöpfen hintereinander haben wollten. Diese Lösung unterbricht das Raster des Bootstraps und führt dazu, dass Schaltflächen, deren Summe 100% Breite benötigt, mit dem Umbruch beginnen.
Papiro

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


Aber wenn ich class = 'col-xs-2' anstelle class='col-xs-3'der Orientierungsverzerrungen verwende ..
vaibhav jain

Dies ist auch hilfreich, wenn die Schaltflächen bei kleineren Auflösungen untereinander gewickelt werden sollen. "Um Ihren Inhalt mit dem Standardraster zu verschachteln, fügen Sie eine neue .row- und eine Reihe von .col-sm- * -Spalten in eine vorhandene .col-sm- * -Spalte ein." - Quelle: getbootstrap.com/docs/3.4/css
Fanky

10

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

4

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


@brauliobo füge deine als Antwort hinzu, weil ich glaube, dass es die richtige ist.
Ganders

3

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

2
Woher kommt die Klasse btn-primary-spacing?
ToniTornado

1
Sieht aus wie eine benutzerdefinierte Implementierung. Ein Code wäre hier schön
Markus Graf


2

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.


2

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 habe dies implementiert, aber es bietet keinen vertikalen Abstand für die Schaltflächen, was mir aufgefallen ist, als sie in zwei Zeilen / "Zeilen" eingewickelt wurden.
LeeC

1

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


Seltsamerweise funktioniert dies für mich viel besser als die oben genannten anspruchsvolleren Lösungen.
Max von Hippel

0

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 .

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.