Добавление простой прошивки в twitter bootstrap

Я использую twitter-bootstrap, с LESS и Rails.

Я хочу добавить простую проставку в мой CSS, которая появляется между строками сетки, чтобы разметить вещи немного лучше. Я не смог найти в загрузчике ничего, что могло бы сделать это для меня, поэтому я решил добавить спейсер div с заданным полем.

Я взял следующий код в моем файле переопределения начальной загрузки:

 .spacer {  margin-top: 40px; }

но кажется, что все поля сгруппированы вверху страницы, а не между сеткой. Я уверен, что это атрибут позиции, которого я пропускаю где-то, пожалуйста, помогите

Я открыт для любых других предложений о лучшем способе достижения этого, или если в t-bootstrap уже есть что-то, что я пропустил.

Спасибо!

Ответ 1

Вы можете добавить класс в каждый из ваших div .row, чтобы добавить некоторое пространство между ними следующим образом:

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

Затем вы можете использовать его так:

<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>

Ответ 2

В Bootstrap 4 вы можете использовать классы, такие как mt-5, mb-5, my-5, mx-5 (y для верхнего и нижнего, x для левого и правого).

По данным их сайта:

Классы именуются в формате {свойство} {сторон} - {размер} для xs и {свойство} {сторон} - {точка останова} - {размер} для sm, md, lg и xl.

Ссылка: https://getbootstrap.com/docs/4.0/utilities/spacing/

Ответ 3

Мой подход. Tricky, но хорошо работает для меня

<p>&nbsp;</p>