Vertikale Leerzeichen mit Twitter Bootstrap hinzufügen?

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.

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.

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.

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

<div class="col-xs-12" style="height:50px;"></div>

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>

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>

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

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.

Mein Trick. Nicht elegant, aber es funktioniert:

<p>&nbsp;</p>

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.

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>

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 .

<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

Es gibt nichts TROCKENERES als

.btn {
    margin-bottom:5px;
}