Dodawanie prostego spacer do twitter bootstrap

Question

Używam twitter-bootstrap, z LESS i Rails.

Chcę dodać prostą przekładkę do mojego css, która pojawia się między wierszami siatki, aby trochę lepiej wypakować. Nie mogłem znaleźć nic w bootstrapie, który to zrobi dla mnie, więc pomyślałem, że mogę dodać element div z rozszerzonym marginesem.

I stook następujący kod w moim bootstrap pliku ręczne:

.spacer { margin-top: 40px; } 

ale wszystkie marginesy wydają się grono razem w górnej części strony, a nie pomiędzy siatką. Jestem pewien, że jest to atrybut pozycji, którego im brakuje - proszę o pomoc.

Jestem otwarty na wszelkie inne sugestie, aby lepiej to osiągnąć, lub jeśli t-bootstrap ma już coś, co przeoczyłem.

Dzięki!

Answer 1

Możesz dodać klasę do każdej .row div dodać trochę przestrzeni między nimi tak:

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

Następnie można go używać tak:

<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

W Bootstrap 4 (nadal jest to alfa) można używać klas takich jak mt-5, mb-5.

Zgodnie z ich strony:

Klasy są nazywane przy użyciu formatu {właściwość} {pokazac} - {size} dla xs i {właściwość} {pokazac} - {breakpoint} - {size} dla sm, md, lg i xl.

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

Answer 3

Moje podejście. Tricky, ale działa dobrze dla mnie

<p>&nbsp;</p>