Hinzufügen eines einfachen Spacers zu Twitter Bootstrap

Question

Ich benutze Twitter-Bootstrap, mit weniger und Schienen.

Ich möchte einen einfachen Abstandhalter zu meinem CSS hinzufügen, der zwischen den Gitterzeilen erscheint, um die Dinge ein wenig besser zu machen. Ich konnte nichts in dem Bootstrap finden, der es für mich tut, also dachte ich, ich könnte einfach ein Spacer-Div mit einem definierten Rand hinzufügen.

ich stook den folgenden Code in meiner Bootstrap-Überschreibungsdatei:

.spacer { margin-top: 40px; } 

aber alle Ränder scheinen Bündel zusammen an der Spitze der Seite und nicht zwischen dem Gitter. Ich bin mir sicher, dass ein Positionsattribut irgendwo fehlt - bitte helfen Sie mir.

Ich bin offen für alle anderen Vorschläge zu besser, um dies zu erreichen, oder wenn T-Bootstrap hat etwas schon, dass ich verpasst habe.

Danke!

Answer 1

Sie können eine Klasse für jede Ihrer .row divs in den etwas Platz zwischen ihnen hinzufügen wie folgt:

.spacer { 
    margin-top: 40px; /* define margin as you see fit */ 
} 

Sie dann es wie so verwenden können:

<div class="row spacer"> 
    <div class="span4">...</div> 
    <div class="span4">...</div> 
    <div class="span4">...</div> 
</div> 

<div class="row spacer"> 
    <div class="span4">...</div> 
    <div class="span4">...</div> 
    <div class="span4">...</div> 
</div> 

Answer 2

In Bootstrap 4 (es ist immer noch Alpha) können Sie Klassen wie mt-5, mb-5 verwenden.

Laut ihrer Website:

Die Klassen werden mit dem Format namens {Eigenschaft} {Seiten} - {size} für xs und {Eigenschaft} {Seiten} - {Unterbrechungs} - {size} für sm, md, lg und xl.

-Link: https://v4-alpha.getbootstrap.com/utilities/spacing/

Answer 3

Mein Ansatz. Tricky, aber funktioniert gut für mich

<p>&nbsp;</p>