Hinzufügen der vertikalen whitespaces mit Hilfe des Twitter Bootstrap?

Was ist der beste Weg zum hinzufügen der vertikalen whitespaces mit Hilfe von Twitter Bootstrap?

Zum Beispiel, sagen wir mal so, ich bin landing-page erstellen und möchte ein bisschen (100px) der leere Leerraum oberhalb und unterhalb einer bestimmten Taste. Natürlich könnte ich erstellen Sie eine bestimmte Klasse für die jeweilige Taste. Aber, ich würde denken, dass Bootstrap sollte eine TROCKEN Weg von hinzufügen in die vertikale Leerzeichen.

InformationsquelleAutor Ryan | 2012-09-05

32

In Bootstrap-4 es gibt Abstand utilites.

Unter Berufung auf die Dokumentation für die verwendete notation:
Abstand Dienstprogramme, die für alle Haltepunkte, von xs zu xl,
haben kein Haltepunkt Abkürzung in Ihnen. Dies ist, weil diese Klassen
angewendet werden von min-width: 0 und oben, und sind somit nicht gebunden an die
media query. Die übrigen Haltepunkte, jedoch beinhalten ein
Haltepunkt Abkürzung.

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

Wo Eigenschaft ist eine der:
- m - für Klassen, die festlegen margin
- p - für Klassen, die festlegen padding
Wo Seiten ist eine der:
- t - für Klassen, die festlegen margin-top oder padding-top
- b - für Klassen, die festlegen margin-bottom oder padding-bottom
- l - für Klassen, die festlegen margin-left oder padding-left
- r - für Klassen, die festlegen margin-right oder padding-right
- x - für Klassen, die sowohl *-left und *-right
- y - für Klassen, die sowohl *-top und *-bottom
- leer - für Klassen, die einen margin oder padding auf allen 4 Seiten des Elements
Wo Größe ist eine der:
- 0 - für die Klassen zu beseitigen, dass die margin oder padding festlegen 0
- 1 - (standardmäßig) für Klassen, die margin oder padding zu $spacer * .25
- 2 - (standardmäßig) für Klassen, die margin oder padding zu $spacer * .5
- 3 - (standardmäßig) für Klassen, die margin oder padding zu $spacer
- 4 - (standardmäßig) für Klassen, die margin oder padding zu $spacer * 1.5
- 5 - (standardmäßig) für Klassen, die margin oder padding zu $spacer * 3
So haben einige zusätzliche vertikale Zwischenraum oberhalb und unterhalb eines Elements verwenden Sie my-5 Klasse.
- Bootstrap-4 ist so schön, mit zu arbeiten :')
- Können Sie uns ein Beispiel für eine gültige Klasse string?
- Schön! Das ist großartig.
InformationsquelleAutor vlp
51

In v2, da gibt es gar nichts gebaut-in für das viel vertikalen Raum, so dass Sie wollen stick mit einer benutzerdefinierten Klasse. Für kleinere Höhen, ich in der Regel nur werfen eine <div class="control-group"> um eine Schaltfläche.
- oder <div class="btn-toolbar">
- Danke. Ich habe jetzt einige spacer10, spacer50, etc Klassen für diesen Einsatz. Ich sehe, es gibt einen feature request in github für diese bereits: bit.ly/R9oap9
- Nett, nicht sehen, der pull-request. Ich bin ein wenig im Zwiespalt, indem es. Bootstrap ist fast vollständig Präsentations - (und bequem), aber wenn Sie schielen schon schwer genug zu ignorieren, die zusätzlichen HTML, können Sie ableiten Semantik von ihm. Vertikale Abstände rein Präsentations -, so dass ich denke, es ist am besten mit einem custom class/ID.
- Auch eine Sache, möchten Sie vielleicht zu schauen ist mit @extend in Ihrem SCSS (oder etwas vergleichbares in WENIGER) zu vermeiden, littering Ihre HTML mit Bootstrap-spezifische Klassen.
- es ist gut, fügen Sie einen css-tag wie dieser style="margin-right:10px;" da bootstrap nicht haben eine gute Möglichkeit, um den vertikalen Raum speziell für Tasten
- Ich hoffe, du machst Witze-inline-Stile wirklich sollte vermieden werden, vor allem, wenn Sie gehen, um Sie zu duplizieren über eine app. Wenn Sie brauchen, anpassen, element, nur @extend es in SCSS oder legen Sie eine neue Klasse.
- ja, ich Stimme mit Ihrer Idee, das ist der bessere Weg, das zu tun
- OP & @dyurkavets dies scheint nicht zu funktionieren in der v3, ist das für die v2?
- Dies war für die v2, aber wie es scheint, v3 minimiert den Abstand um .btn-toolbar, so sollten Sie nur fügen Sie eine neue Klasse mit eigenen Margen.
- Anscheinend ist der github-feature-Anfrage geschlossen wurde, und das feature kann es in Bootstrap v4. bit.ly/R9oap9
- Nun, die Bootstrap-4 verfügbar ist, es scheint, Sie haben built-in spacer-Klassen. Sehen die jetzt überprüft, Antwort von @vlp
- Vielen Dank für das update @Ryan. Ich bin nicht sicher, was die Etikette ist für die Spaltung von Fragen und Antworten, basierend auf Versionen, aber ich denke, man sollte sich wohl klären, die version, die in Ihrer Frage. Es ist ziemlich verwirrend, dass die Antworten für mehrere Versionen (aber nicht gekennzeichnet für welche version), wie es seit nunmehr sechs Jahren (!) da das original wurde gestellt und beantwortet. Ich habe gerade ein "v2" an meine alte Antwort für künftige Zeitreisende.
InformationsquelleAutor jmdeldin
46

Umhüllung funktioniert, aber wenn Sie wollen einfach nur einen Platz, den ich mag:
```
<div class="col-xs-12" style="height:50px;"></div>
```
- Hinzufügen eines inline-style bei der Arbeit mit Bootstrap ist generell keine gute Idee. Es sollte zumindest gehen die in CSS.
- beachten Sie, dass "col-xs-12" ist genau das gleiche wie ohne Klassen überhaupt
InformationsquelleAutor hidden-username
34

Sorry, zu Graben, ein altes Grab hier, aber warum nicht genau dies tun?
```
<div class="form-group">
    &nbsp;
</div>
```
Es wird ein Raum der Höhe, ein normales Formular-element.

Scheint es über 1 Linie, auf der ein Formular ist ungefähr 50px (47px auf mein element ich gerade geprüft). Dies ist eine horizontale form, mit label auf der linken 2col und Eingang auf der rechten 10col. Damit Ihre Pixel können variieren.

Seit mine ist im Grunde 50px, ich würde eine spacer 50px hoch ist und keine Ränder oder Polsterung;
```
.spacer { margin:0; padding:0; height:50px; }
<div class="spacer"></div>
```
- Dies fügt dem Raum unterhalb der Gruppe, aber nicht oben
- Natürlich tut Sie das, das ist genau das, was er verlangte, einen Weg, um einen vertikalen Leerraum. Wenn Sie brauchen, benutzerdefinierte Formen-Gruppe oder Zeile oder sogar eine Schaltfläche, machen Sie Ihre eigenen Klasse, um es hinzuzufügen, überschreiben Sie die Ränder. Ie: class="form-group spaced-Gruppe" und ".spaced-group { margin-top: 15px !important; margin-bottom: 15px !wichtig; }. .. Es ist nur die gängige css-Sinn.
- Der OP explizit gefragt: "ein bisschen (100px) der leere weiße Raum, in oben und unter einer bestimmten Taste"
- Nein, das war ein Beispiel, nicht seine Frage. Seine Frage war "Was ist der beste Weg zum hinzufügen der vertikalen Leerraum mit Twitter' s Bootstrap?" - eine vertikale leere Raum ist anders als eine Marge auf ein bestimmtes element. Wenn er es macht, für alle Tasten, er könnte sich ändern, die Marge von btn oder stellen Sie eine eigene Klasse wie "btn-spaced" - mit seiner gewünschten Margen. Wenn er will einfach nur ein Weg um einen Abstand, wo immer er will, ein spacer, eine Feste Höhe, wie ich Sie beantwortet ist, was er braucht. Er stellte eine Frage und gab ein Beispiel für andere. Ich nahm an, er wusste CSS-genug, um zu wissen, dass er könnte, überschreiben die Margen.
- Da sagte er: eine CHEMISCHE Methode, und button, dann würde ich eine Schaltfläche erstellen, die Klasse mit den Margen, die ich wollte: btn-Abstand. Wenn es nicht nur die Tasten, dann eine Allgemeine Marge, die gelten würde, Zeilen, form-Gruppen, was auch immer. Wie class="row space-klein" oder class="form-group-Raum-medium".. Wo kleine, mittlere und große sind nur Varianten der Ränder, und die angewandt werden könnten, um praktisch alles. - schwer zu sagen, was der op will. Für Schaltflächen nur oder auch nur für jedes element..
- Sorry, mein Fehler, ich wusste gar nicht, dass Sie gemeint das hinzufügen dieser gesamte block von HTML. Ich habe gelesen, dass Sie es waren, was darauf hindeutet, benutzen Sie einfach die form-group - Klasse um, was je element benötigte Abstand. Aber was Sie vorschlagen ist dieses div element oben und unten, um Platz zu schaffen.
- Es funktioniert für mich. Thx 🙂
InformationsquelleAutor Wade
22

Ich weiß, das ist alt, aber ich kam hier auf der Suche für die gleiche Sache, die ich fand, dass Bootstrap hat der help-block, sehr praktisch für diese Situationen:
```
<div class="help-block"></div>
```
InformationsquelleAutor Cross
21

Für version 3 gibt es nicht zu sein scheinen, ist der "bootstrap" Methode dafür ordentlich.

Einen panel eine well und ein form-group alle bieten einen vertikalen Abstand.

Einen formalen bestimmten vertikalen Abstand Lösung ist, offenbar auf der roadmap für bootstrap v4

https://github.com/twbs/bootstrap/issues/4286#issuecomment-36331550
https://github.com/twbs/bootstrap/issues/13532
- .form-Gruppe scheint die beste Wahl, da das css ist beschränkt auf margin-bottom:15px. .sowie und .panel sollte nicht verwendet werden, wenn Sie möchten, fügen Sie einfach etwas Abstand, denn Sie haben andere Eigenschaften (wie background, padding, border, etc)
InformationsquelleAutor ErichBSchulz

Habe ich nur erstellt ein div-Klasse mit unterschiedlichen Höhen, d.h.

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

CSS ist:

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

Erstellen Sie einfach einen Teiler Klasse für was auch immer Höhen erforderlich sind.

InformationsquelleAutor user5593012

7

Mein trick. Nicht elegant, aber es funktioniert:
```
<p>&nbsp;</p>
```
- oder <br> ?? oder gibt es etwas falsch mit <br>??
- Sollten Sie post, als Antwort. Vielleicht werden die Menschen immer zu sehr auf die Rahmenbedingungen und wir haben begonnen zu vergessen, die Grundlagen.
InformationsquelleAutor asiniy
4

Versuchte ich mit <div class="control-group"> und es änderte nichts an meinem layout. Es nicht hinzufügen, vertikalen Raum. Die Lösung, die für mich gearbeitet wurde:
```
<ol style="visibility:hidden;"></ol>
```
Wenn das nicht genug vertikalen Platz, Sie können schrittweise mehr bekommen, indem Sie geschachtelte <li> </li> tags.
- Vielen Dank, und dein Vorschlag würde funktionieren, mit oder ohne Bootstrap. Aber die Frage war speziell zur Verwendung von Twitter Bootstrap hinzufügen, um den Abstand.
InformationsquelleAutor John Erck
4

Verwenden Sie einfach <br/>. Ich fand mich hier auf der Suche nach der Antwort auf diese Frage und fühlte mich dann irgendwie dumm für die, die nicht denken über die Verwendung einer einfachen Zeilenumbruch wie vorgeschlagen von Benutzer JayKilleen in einem Kommentar.
- Nachteil ist, dass Sie nicht bekommen, genauen 100px Kontrolle, aber es sollte sicherlich funktionieren, um eine angemessene Menge an Speicherplatz.
- du hast Recht, habe ich nicht bemerkt zunächst, dass er sich darum gekümmert, genau 100px. Ich dachte, er wollte nur ein "bit". Er könnte auf jeden Fall seine eigene helper-Klasse wie alle vorgeschlagen. Aber da dieser post ist so viele Jahre alt, er könnte jetzt gerade ein upgrade auf bootstrap 4 für präzise Abstände, oder nehmen Sie die helper-Klassen aus.
InformationsquelleAutor adjenks
3

Ich weiß, das ist alt, und es gibt mehrere gute Lösungen, die bereits gebucht, aber eine einfache Lösung, die für mich gearbeitet
```
<style>
  .divider{
    margin: 0cm 0cm .5cm 0cm;
  }
</style>
```
dann
```
<div class="divider"></div>
```
InformationsquelleAutor Sanjeev
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
- Wie ist diese Antwort auf die Frage?
- Es fügt vertikalen Abstand wie der ursprüngliche poster gefragt, auch bootstrap Entwickler sind jetzt catering für die es in der neuesten version (4) im beta-Status. Es ist tatsächlich die richtige Antwort und wenn Sie google den vertikalen Abstand in bootstrap würden Sie sehen, es war nicht gesorgt worden. Bitte nicht downvote Sachen, die du nicht getestet hast oder gegoogelt.
- Sie haben ganz klar nicht die Frage. "Ich möchte ein bisschen (100px) der leere weiße Raum, oberhalb und unterhalb einer bestimmten Taste." Eine bestimmte Taste... eine bestimmte Taste...
- Vor, dass er sagte: "Zum Beispiel, sagen wir mal". Es war nur ein Beispiel, es war nicht das problem. Nicht zitieren, aus dem Zusammenhang gerissen. Das Beispiel, das ich zur Verfügung gestellt ist geräumig und alle die info, die ich gab, ist ausreichend.
InformationsquelleAutor Den
-3

Es ist nichts mehr TROCKEN als
```
.btn {
    margin-bottom:5px;
}
```
- Ich würde empfehlen, gegen ändern mit dem styling der Basis bootstrap-css-Klassen.
- Aber wenn dies zu einem Allgemeinen standard in Ihrer Anwendung, könnte man das überschreiben der bootstrap-styling, mit WENIGER und Variablen und/oder sorgfältig verwaltet override-stylesheets.
InformationsquelleAutor ph7

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.