In Bootstrap 4 gibt es Abstandsdienstprogramme .
Zitieren der Dokumentation für die verwendete Notation :
Abstandsdienstprogramme, die für alle Haltepunkte von xs
bis gelten xl
, enthalten keine Abkürzung für Haltepunkte. Dies liegt daran, dass diese Klassen ab min-width: 0
und 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-top
oder setzenpadding-top
b
- für Klassen, die margin-bottom
oder setzenpadding-bottom
l
- für Klassen, die margin-left
oder setzenpadding-left
r
- für Klassen, die margin-right
oder setzenpadding-right
x
- für Klassen, die sowohl *-left
als auch setzen*-right
y
- für Klassen, die sowohl *-top
als auch setzen*-bottom
- leer - für Klassen, die ein
margin
oder padding
auf 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 margin
oder padding
auf setzen$spacer * .25
2
- (standardmäßig) für Klassen, die das margin
oder padding
auf setzen$spacer * .5
3
- (standardmäßig) für Klassen, die das margin
oder padding
auf setzen$spacer
4
- (standardmäßig) für Klassen, die das margin
oder padding
auf setzen$spacer * 1.5
5
- (standardmäßig) für Klassen, die das margin
oder padding
auf setzen$spacer * 3
Um also zusätzlichen vertikalen Raum über und unter einem Element zu haben, würden Sie my-5
class verwenden.
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.quelle
.btn-toolbar
Sie sollten also einfach eine neue Klasse mit Ihren eigenen Rändern hinzufügen.Das Verpacken funktioniert, aber wenn Sie nur ein Leerzeichen möchten, mag ich:
quelle
Es tut mir leid, hier ein altes Grab zu graben, aber warum nicht einfach das tun?
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.
quelle
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:
quelle
Für Version 3 scheint es keinen "Bootstrap" Weg zu geben, um dies ordentlich zu erreichen.
A
panel
, awell
und aform-group
bieten 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
quelle
Ich habe lediglich eine Div-Klasse mit verschiedenen Höhen erstellt, z
Das CSS lautet:
Erstellen Sie einfach eine Teilerklasse für jede Höhe, die benötigt wird.
quelle
Mein Trick. Nicht elegant, aber es funktioniert:
quelle
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.quelle
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
und dann erstellen Sie ein div in Ihrem HTML
quelle
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:Wenn Ihnen dadurch nicht genügend vertikaler Platz zur Verfügung steht, können Sie durch Hinzufügen verschachtelter
<li> </li>
Tags schrittweise mehr erreichen .quelle
http://v4-alpha.getbootstrap.com/components/forms/#form-controls
quelle
Es gibt nichts TROCKENERES als
quelle