web-dev-qa-db-de.com

Vertikales Leerzeichen mit Twitter Bootstrap hinzufügen?

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

Angenommen, ich erstelle eine Landing Page und möchte über und unter einer bestimmten Schaltfläche ein kleines Leerzeichen (100 Pixel) einfügen. Natürlich könnte ich für diese bestimmte Schaltfläche eine bestimmte Klasse erstellen. Aber ich würde denken, dass Bootstrap sollte eine DRY Art des Hinzufügens in vertikale Leerzeichen.

twitter-bootstrapwhitespacevertical-alignmenttwitter-bootstrap-2
155
Ryan

In Bootstrap 4 gibt es Spacing Utilites .

Zitieren die Dokumentation für die verwendete Notation :

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

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

Dabei ist property einer von:

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

Wo Seiten ist einer von:

  • t - für Klassen, die margin-top oder padding-top setzen
  • b - für Klassen, die margin-bottom oder padding-bottom setzen
  • l - für Klassen, die margin-left oder padding-left setzen
  • r - für Klassen, die margin-right oder padding-right setzen
  • x - für Klassen, die sowohl *-left als auch *-right setzen
  • y - für Klassen, die sowohl *-top als auch *-bottom setzen
  • leer - für Klassen, die auf allen 4 Seiten des Elements ein margin oder padding setzen

Wobei Größe einer von:

  • 0 - für Klassen, die den Rand oder das Auffüllen durch Setzen auf 0 Beseitigen
  • 1 - (standardmäßig) für Klassen, die margin oder padding auf $spacer * .25 Setzen
  • 2 - (standardmäßig) für Klassen, die margin oder padding auf $spacer * .5 Setzen
  • 3 - (standardmäßig) für Klassen, die margin oder padding auf $spacer Setzen
  • 4 - (standardmäßig) für Klassen, die margin oder padding auf $spacer * 1.5 Setzen
  • 5 - (standardmäßig) für Klassen, die margin oder padding auf $spacer * 3 Setzen

Wenn Sie also über und unter einem Element zusätzlichen vertikalen Abstand haben möchten, verwenden Sie die Klasse my-5.

32
vlp

In v2 ist für so viel vertikalen Raum nichts integriert, daher sollten Sie sich an eine benutzerdefinierte Klasse halten. Für kleinere Höhen werfe ich normalerweise nur ein <div class="control-group"> um einen Knopf.

51
jmdeldin

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

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

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

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

Es wird ein Leerzeichen in der Höhe eines normalen Formularelements eingefügt.

Es scheint, dass ungefähr 1 Zeile auf einem Formular ungefähr 50 Pixel groß ist (47 Pixel auf meinem Element, das ich gerade inspiziert habe). Dies ist eine horizontale Form, mit Beschriftung links 2col und Eingabe rechts 10col. Deine Pixel können also variieren.

Da meins im Grunde genommen 50px ist, würde ich einen Abstandhalter von 50px ohne Ränder oder Polsterung erstellen.

.spacer { margin:0; padding:0; height:50px; }
<div class="spacer"></div>
34
Wade

Ich weiß, dass dies alt ist, aber ich bin hierher gekommen, um das Gleiche zu suchen. Ich habe festgestellt, dass Bootstrap hat den Hilfe-Block, sehr praktisch für diese Situationen:

<div class="help-block"></div>
22
Cross

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

Ein panel, ein well und ein form-group Alle haben einen vertikalen Abstand.

Eine formalere Lösung für vertikale Abstände ist offenbar auf der Roadmap für bootstrap v4

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

21
ErichBSchulz

Ich habe lediglich eine div-Klasse mit verschiedenen Höhen erstellt, d.h.

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

Das CSS ist:

.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 alle Höhen, die benötigt werden.

8
user5593012

Mein Trick. Nicht elegant, aber es funktioniert:

<p>&nbsp;</p>
7
asiniy

Benutz einfach <br/>. Ich war hier auf der Suche nach der Antwort auf diese Frage 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.

5
adjenks

Ich habe versucht, <div class="control-group"> Zu verwenden, aber mein Layout wurde 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 Sie dadurch nicht genug vertikalen Platz haben, können Sie schrittweise mehr erreichen, indem Sie verschachtelte <li>&nbsp;</li> - Tags hinzufügen.

4
John Erck

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

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

und dann

<div class="divider"></div>
3
Sanjeev
<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

1
Den