Vertikale Leerzeichen mit Twitter Bootstrap hinzufügen?

162

Was ist der beste Weg, um vertikale Leerzeichen mit dem Bootstrap von Twitter hinzuzufügen?

Nehmen wir zum Beispiel an, ich erstelle eine Zielseite und möchte ein bisschen (100 Pixel) leeres Leerzeichen über und unter einer bestimmten Schaltfläche. Natürlich könnte ich eine bestimmte Klasse für diese bestimmte Schaltfläche erstellen. Aber ich würde denken, dass Bootstrap eine DRY- Methode zum Hinzufügen vertikaler Leerzeichen haben sollte.

Ryan
quelle

Antworten:

39

In Bootstrap 4 gibt es Abstandsdienstprogramme .

Zitieren der Dokumentation für die verwendete Notation :

Abstandsdienstprogramme, die für alle Haltepunkte von xsbis gelten xl, enthalten keine Abkürzung für Haltepunkte. Dies liegt daran, dass diese Klassen ab min-width: 0und zu angewendet werden und daher nicht an eine Medienabfrage gebunden sind. Die verbleibenden Haltepunkte enthalten jedoch eine Abkürzung für Haltepunkte.

Die Klassen werden mit dem Format benannt {property}{sides}-{size}für xs und {property}{sides}-{breakpoint}-{size}für sm, md, lg, und xl.

Wo Eigentum ist eines von:

  • m - für Klassen, die setzen margin
  • p - für Klassen, die setzen padding

Wo Seiten ist eine von:

  • t- für Klassen, die margin-topoder setzenpadding-top
  • b- für Klassen, die margin-bottomoder setzenpadding-bottom
  • l- für Klassen, die margin-leftoder setzenpadding-left
  • r- für Klassen, die margin-rightoder setzenpadding-right
  • x- für Klassen, die sowohl *-leftals auch setzen*-right
  • y- für Klassen, die sowohl *-topals auch setzen*-bottom
  • leer - für Klassen, die ein marginoder paddingauf allen 4 Seiten des Elements festlegen

Wo Größe ist eine von:

  • 0 - für Klassen, bei denen der Rand oder die Auffüllung durch Setzen auf beseitigt wird 0
  • 1- (standardmäßig) für Klassen, die das marginoder paddingauf setzen$spacer * .25
  • 2- (standardmäßig) für Klassen, die das marginoder paddingauf setzen$spacer * .5
  • 3- (standardmäßig) für Klassen, die das marginoder paddingauf setzen$spacer
  • 4- (standardmäßig) für Klassen, die das marginoder paddingauf setzen$spacer * 1.5
  • 5- (standardmäßig) für Klassen, die das marginoder paddingauf setzen$spacer * 3

Um also zusätzlichen vertikalen Raum über und unter einem Element zu haben, würden Sie my-5class verwenden.

vlp
quelle
3
Könnten Sie ein Beispiel für eine gültige Klassenzeichenfolge geben?
Kolob Canyon
Nett! Das ist toll.
Tiki
51

In Version 2 ist für so viel vertikalen Raum nichts integriert. Sie sollten sich also an eine benutzerdefinierte Klasse halten. Bei kleineren Höhen werfe ich normalerweise nur <div class="control-group">einen Knopf.

jmdeldin
quelle
8
oder <div class = "btn-toolbar">
dyurkavets
9
Vielen Dank. Ich habe jetzt einige Klassen für spacer10, spacer50 usw. für diese Verwendung erstellt. Ich sehe, es gibt bereits eine Feature-Anfrage in Github dafür: bit.ly/R9oap9
Ryan
1
@ Ryan: Schön, habe die Pull-Anfrage nicht gesehen. Ich bin ein wenig in Konflikt geraten. Bootstrap ist fast ausschließlich präsentativ (und praktisch), aber wenn Sie stark genug blinzeln, um den gesamten zusätzlichen HTML-Code zu ignorieren, können Sie daraus Semantik ableiten. Der vertikale Abstand ist rein präsentativ, daher denke ich, dass dies am besten mit einer benutzerdefinierten Klasse / ID möglich ist.
jmdeldin
2
Dies war für Version 2, aber es scheint, dass Version 3 den Abstand minimiert hat. .btn-toolbarSie sollten also einfach eine neue Klasse mit Ihren eigenen Rändern hinzufügen.
jmdeldin
3
Anscheinend wurde die Github-Funktionsanforderung geschlossen und die Funktion schafft es möglicherweise in Bootstrap v4. bit.ly/R9oap9
Ryan
48

Das Verpacken funktioniert, aber wenn Sie nur ein Leerzeichen möchten, mag ich:

<div class="col-xs-12" style="height:50px;"></div>
versteckter Benutzername
quelle
16
Das Hinzufügen eines Inline-Stils bei der Arbeit mit Bootstrap ist im Allgemeinen keine gute Idee. Es sollte zumindest in CSS gehen.
Alexykot
2
Beachten Sie
34

Es tut mir leid, hier ein altes Grab zu graben, aber warum nicht einfach das tun?

<div class="form-group">
    &nbsp;
</div>

Es wird ein Leerzeichen hinzugefügt, das der Höhe eines normalen Formularelements entspricht.

Es scheint, dass ungefähr 1 Zeile in einem Formular ungefähr 50 Pixel groß ist (47 Pixel in meinem Element, das ich gerade überprüft habe). Dies ist eine horizontale Form mit Beschriftung auf der linken Seite 2col und Eingabe auf der rechten Seite 10col. Ihre Pixel können also variieren.

Da meine im Grunde genommen 50 Pixel groß ist, würde ich einen Abstandhalter von 50 Pixel Höhe ohne Ränder oder Polsterung erstellen.

.spacer { margin:0; padding:0; height:50px; }
<div class="spacer"></div>
Waten
quelle
1
Dies fügt Platz unter der Gruppe, aber nicht über
icc97
Natürlich ist es genau das, wonach er gefragt hat, um eine vertikale Leerstelle hinzuzufügen. Wenn Sie eine benutzerdefinierte Formulargruppe oder Zeile oder sogar eine Schaltfläche benötigen, erstellen Sie eine eigene Klasse, um sie hinzuzufügen, und überschreiben Sie die Ränder. Dh: class = "form-group spaced-group" und ".spaced-group {Rand-oben: 15px! Wichtig; Rand-unten: 15px! Wichtig;} ... Es ist nur gesunder CSS-Sinn.
Wade
Das OP fragte ausdrücklich: "ein bisschen (100px) Leerzeichen über und unter einer bestimmten Schaltfläche"
icc97
1
Nein, das war ein Beispiel, nicht seine Frage. Seine Frage war: "Was ist der beste Weg, um mit dem Bootstrap von Twitter vertikale Leerzeichen hinzuzufügen?" - Ein vertikaler Leerraum unterscheidet sich von einem Rand eines bestimmten Elements. Wenn er es für alle Schaltflächen tat, konnte er den Rand von btn ändern oder seine eigene Klasse wie "btn-beabstandet" mit den gewünschten Rändern erstellen. Wenn er nur eine Möglichkeit haben möchte, eine Lücke hinzuzufügen, wo immer er will, braucht er einen Abstandhalter mit fester Höhe, wie ich geantwortet habe. Er stellte eine Frage und gab ein Beispiel für eine andere. Ich nahm an, dass er CSS genug kannte, um zu wissen, dass er die Ränder überschreiben konnte.
Wade
Da er eine DRY-Methode und einen Button sagte, würde ich eine Button-Klasse mit den gewünschten Rändern erstellen: BTN-Abstand. Wenn es nicht nur Schaltflächen gäbe, dann einen allgemeinen Rand, der für Zeilen, Formulargruppen usw. gilt. Wie class = "row space-small" oder class = "form-group space-medium". Wobei klein mittel und groß nur Varianten der Ränder sind und auf praktisch alles angewendet werden können. - Schwer zu sagen, was die Operation will. Nur für Schaltflächen oder nur für ein beliebiges Element.
Wade
24

Ich weiß, dass dies alt ist, aber ich bin hierher gekommen, um dasselbe zu suchen. Ich fand, dass Bootstrap den Hilfeblock hat, der für diese Situationen sehr praktisch ist:

<div class="help-block"></div>
Kreuz
quelle
21

Für Version 3 scheint es keinen "Bootstrap" Weg zu geben, um dies ordentlich zu erreichen.

A panel, a wellund a form-groupbieten alle einen vertikalen Abstand.

Eine formalere spezifische Lösung für vertikale Abstände befindet sich offenbar auf der Roadmap für Bootstrap v4

https://github.com/twbs/bootstrap/issues/4286#issuecomment-36331550 https://github.com/twbs/bootstrap/issues/13532

ErichBSchulz
quelle
5
.form-group scheint die beste Wahl zu sein, da das CSS auf den unteren Rand beschränkt ist: 15px. .well und .panel sollten nicht verwendet werden, wenn Sie einfach einen gewissen Abstand hinzufügen möchten, da sie andere Attribute haben (wie Hintergrund, Polsterung, Rahmen usw.)
xaa
9

Ich habe lediglich eine Div-Klasse mit verschiedenen Höhen erstellt, z

<div class="divider-10"></div>

Das CSS lautet:

.divider-10 {
    width:100%; 
    min-height:1px; 
    margin-top:10px; 
    margin-bottom:10px;  
    display:inline-block; 
    position:relative;
}

Erstellen Sie einfach eine Teilerklasse für jede Höhe, die benötigt wird.

user5593012
quelle
8

Mein Trick. Nicht elegant, aber es funktioniert:

<p>&nbsp;</p>
Asiniy
quelle
2
@ JayKilleen +1 Das solltest du als Antwort posten. Vielleicht verlassen sich die Menschen zu sehr auf die Rahmenbedingungen und haben begonnen, die Grundlagen zu vergessen.
ADJenks
5

Einfach benutzen <br/>. Ich fand mich hier auf der Suche nach der Antwort auf diese Frage wieder und fühlte mich dann irgendwie albern, weil ich nicht daran gedacht hatte, einen einfachen Zeilenumbruch zu verwenden, wie es der Benutzer JayKilleen in einem Kommentar vorgeschlagen hatte.

ADJenks
quelle
Nachteil ist, dass Sie keine exakte 100px-Kontrolle erhalten, aber es sollte auf jeden Fall funktionieren, um eine angemessene Menge an Speicherplatz hinzuzufügen.
mix3d
1
@ mix3d, du bist genau dort, ich habe zuerst nicht bemerkt, dass es ihm wichtig war, dass es genau 100px ist. Ich dachte, er wollte nur ein bisschen. Er konnte definitiv seine eigene Helferklasse machen, wie alle vorgeschlagen hatten. Aber da dieser Beitrag so viele Jahre alt ist, kann er jetzt einfach auf Bootstrap 4 upgraden, um einen genauen Abstand zu erhalten, oder die Hilfsklassen daraus übernehmen.
ADJenks
5

Ich weiß, dass dies alt ist und es bereits einige gute Lösungen gibt, aber eine einfache Lösung, die für mich funktioniert hat, ist das folgende CSS

<style>
  .divider{
    margin: 0cm 0cm .5cm 0cm;
  }
</style>

und dann erstellen Sie ein div in Ihrem HTML

<div class="divider"></div>
Sanjeev
quelle
4

Ich habe es versucht <div class="control-group">und es hat mein Layout nicht geändert. Es wurde kein vertikaler Raum hinzugefügt. Die Lösung, die für mich funktioniert hat, war:

<ol style="visibility:hidden;"></ol>

Wenn Ihnen dadurch nicht genügend vertikaler Platz zur Verfügung steht, können Sie durch Hinzufügen verschachtelter <li>&nbsp;</li>Tags schrittweise mehr erreichen .

John Erck
quelle
Vielen Dank, und Ihr Vorschlag würde mit oder ohne Bootstrap funktionieren. Die Frage bezog sich jedoch speziell auf die Verwendung von Twitter Bootstrap, um den Abstand hinzuzufügen.
Jonathan
1
<form>
 <fieldset class="form-group"><input type="text" class="form-control" placeholder="Input"/></fieldset>
 <fieldset class="form-group"><button class="btn btn-primary"/>Button</fieldset>
</form>

http://v4-alpha.getbootstrap.com/components/forms/#form-controls

Den
quelle
1
Wie ist das eine Antwort auf die Frage?
Matt S
Es fügt vertikale Abstände hinzu, wie es das Originalplakat verlangt, und Bootstrap-Entwickler sorgen jetzt in der neuesten Version (4) im Beta-Status dafür. Es ist eigentlich die richtige Antwort und wenn Sie den vertikalen Abstand in Bootstrap googeln, werden Sie feststellen, dass dies zuvor nicht berücksichtigt wurde. Bitte stimmen Sie keine Dinge ab, die Sie nicht getestet oder gegoogelt haben.
Den
Sie haben die Frage eindeutig nicht gelesen. "Ich möchte ein bisschen (100px) Leerzeichen über und unter einem bestimmten Knopf." Ein bestimmter Knopf ... ein bestimmter Knopf ...
Matt S
1
Davor sagte er: "Zum Beispiel sagen wir". Es war nur ein Beispiel, es war nicht das spezifische Problem. Zitieren Sie nicht aus dem Zusammenhang heraus. Das Beispiel, das ich zur Verfügung gestellt habe, ist umfangreich und alle Informationen, die ich gegeben habe, sind angemessen.
Den
-3

Es gibt nichts TROCKENERES als

.btn {
    margin-bottom:5px;
}
ph7
quelle
13
Ich würde empfehlen, das Styling von Basis-Bootstrap-CSS-Klassen nicht zu ändern.
James Palawaga
1
@ JamesPalawaga +1. Wenn dies jedoch ein allgemeiner Standard für Ihre Anwendung sein soll, können Sie das Bootstrap-Styling überschreiben, indem Sie WENIGER und Variablen verwenden und / oder sorgfältig verwaltete Stylesheets überschreiben.
Jonathan