Twitter Bootstrap - oberen Abstand zwischen den Zeilen hinzufügen

Question

So fügen Sie einen oberen Rand zu class="row" Elemente mit Twitter Bootstrap Framework?

Answer 1

Das Bearbeiten oder Überschreiben der Zeile in Twitter Bootstrap ist eine schlechte Idee, da dies ein zentraler Bestandteil des Seitengerüsts ist und Sie Zeilen ohne oberen Rand benötigen.

Um dieses Problem zu lösen, erstellen Sie stattdessen eine neue Klasse "top-buffer", die den von Ihnen benötigten Standardrand hinzufügt.

.top-buffer { margin-top:20px; }

Und dann verwenden Sie sie für die Div-Zeilen, bei denen Sie einen oberen Rand benötigen.

<div class="row top-buffer"> ...

Answer 2

Bootstrap 3

Wenn Sie Zeilen in Bootstrap trennen müssen, können Sie einfach .form-group . Dies fügt 15px Rand an der Unterseite der Zeile.

In Ihrem Fall können Sie, um den oberen Rand zu erhalten, diese Klasse zu der vorherigen hinzufügen .row Element

<div class="row form-group">

/* From bootstrap.css */
.form-group {
        margin-bottom: 15px;
}

Bootstrap 4

Sie können die integrierten Abstandsklassen

<div class="row mt-3"></div>

Das "t" im Klassennamen bedeutet, dass sie nur für die "obere" Seite gilt, es gibt ähnliche Klassen für unten, links und rechts. Die Zahl gibt die Größe des Platzes an.

Answer 3

Ok, nur damit ihr wisst, was passiert ist, ich habe einige neue Klassen verwendet, wie Acyra oben sagt:

.top5 { margin-top:5px; }
.top7 { margin-top:7px; }
.top10 { margin-top:10px; }
.top15 { margin-top:15px; }
.top17 { margin-top:17px; }
.top30 { margin-top:30px; }

Wann immer ich will, tue ich es <div class="row top7"></div>

für eine bessere Reaktionsfähigkeit können Sie hinzufügen margin-top:7% anstelle von 5px zum Beispiel :D

Answer 4

Für Bootstrap 4 Die Abstände sollten mit

Shorthand-Utility-Klassen

in folgendem Format:

{property}{sides}-{size}

Wo Eigenschaft ist einer von:

• m - für Klassen, die einen Spielraum festlegen
• p - für Klassen, die eine Füllung festlegen

Wo Seiten ist einer von:

• t - für Klassen, die margin-top oder padding-top festlegen
• b - für Klassen, die margin-bottom oder padding-bottom festlegen
• l - für Klassen, die margin-left oder padding-left festlegen
• r - für Klassen, die margin-right oder padding-right festlegen
• x - für Klassen, die sowohl *-left als auch *-right setzen
• y - für Klassen, die sowohl *-top als auch *-bottom festlegen
• blank - für Klassen, die einen Rand oder eine Auffüllung auf allen 4 Seiten des Elements festlegen

Wo Größe ist einer von:

• 0 - für Klassen, die den Rand oder die Polsterung durch Setzen auf 0 eliminieren
• 1 - (standardmäßig) für Klassen, die den Rand oder das Padding auf $spacer * .25 setzen
• 2 - (standardmäßig) für Klassen, die den Rand oder das Padding auf $spacer * .5 setzen
• 3 - (standardmäßig) für Klassen, die den Rand oder das Padding auf $spacer setzen
• 4 - (standardmäßig) für Klassen, die den Rand oder das Padding auf $spacer * 1,5 setzen
• 5 - (standardmäßig) für Klassen, die den Rand oder das Padding auf $spacer * 3 setzen
• auto - für Klassen, die den Rand auf auto setzen

Sie sollten also jeden dieser Schritte unternehmen:

<div class="row mt-1">
<div class="row mt-2">
          ...
<div class="row mt-5">

Lesen Sie die docs für weitere Erklärungen. Probieren Sie Live-Beispiele über aquí .

Answer 5

Manchmal kann margin-top Designprobleme verursachen:

http://www.w3.org/TR/CSS2/box.html#collapsing-margins

Ich empfehle daher, "margin-bottom classes" anstelle von "margin-top classes" zu erstellen und sie auf das vorherige Element anzuwenden.

Wenn Sie Bootstrap verwenden und LESS-Bootstrap-Dateien importieren, versuchen Sie, die margin-bottom-Klassen mit proportionalen Bootstrap Theme-Spaces zu definieren:

.margin-bottom-xs {margin-bottom: ceil(@line-height-computed / 4);}  
.margin-bottom-sm {margin-bottom: ceil(@line-height-computed / 2);} 
.margin-bottom-md {margin-bottom: @line-height-computed;}
.margin-bottom-lg {margin-bottom: ceil(@line-height-computed * 2);}