Добавить вертикальный пробел с помощью Twitter Bootstrap?

Какой лучший способ добавить вертикальные пробелы с помощью Twitter Bootstrap?

Например, предположим, что я создаю целевую страницу и хотел бы (100px) пустых пробелов выше и ниже определенной кнопки. Очевидно, я мог бы создать определенный класс для этой конкретной кнопки. Но я думаю, что Bootstrap должен иметь СУХОЙ способ добавления в вертикальные пробелы.

В Bootstrap 4 есть служебные интервалы .

Ссылаясь на документацию по использованной нотации :

Утилиты разнесения, которые применяются ко всем точкам останова, от xsдо xl, не имеют аббревиатуры точек останова. Это связано с тем, что эти классы применяются min-width: 0сверху вниз и, следовательно, не связаны медиа-запросом. Остальные точки останова, однако, включают аббревиатуру точки останова.

Классы названы с использованием формата {property}{sides}-{size}для xs и {property}{sides}-{breakpoint}-{size}для sm, md, lgи xl.

Где свойство является одним из:

• m - для классов, которые установлены margin
• p - для классов, которые установлены padding

Где стороны является одним из:

• t- для классов, которые устанавливают margin-topилиpadding-top
• b- для классов, которые устанавливают margin-bottomилиpadding-bottom
• l- для классов, которые устанавливают margin-leftилиpadding-left
• r- для классов, которые устанавливают margin-rightилиpadding-right
• x- для классов, которые устанавливают *-leftи*-right
• y- для классов, которые устанавливают *-topи*-bottom
• пусто - для классов, которые устанавливают a marginили paddingна все 4 стороны элемента

Где размер является одним из:

• 0 - для классов, которые устраняют поля или отступы, устанавливая его в 0
• 1- (по умолчанию) для классов , которые устанавливают marginили paddingв$spacer * .25
• 2- (по умолчанию) для классов , которые устанавливают marginили paddingв$spacer * .5
• 3- (по умолчанию) для классов , которые устанавливают marginили paddingв$spacer
• 4- (по умолчанию) для классов , которые устанавливают marginили paddingв$spacer * 1.5
• 5- (по умолчанию) для классов , которые устанавливают marginили paddingв$spacer * 3

Таким образом, чтобы иметь дополнительное вертикальное пространство над и под элементом, вы должны использовать my-5класс.

В v2 нет ничего встроенного для такого большого вертикального пространства, поэтому вы захотите придерживаться пользовательского класса. Для небольших высот я обычно просто нажимаю <div class="control-group">кнопку.

Упаковка работает, но когда вам просто нужно пространство, мне нравится:

<div class="col-xs-12" style="height:50px;"></div>

Извините, что копаю здесь старую могилу, но почему бы не сделать это?

<div class="form-group">
    &nbsp;
</div>

Это добавит пробел высоту обычного элемента формы.

Кажется, что примерно 1 строка в форме составляет примерно 50 пикселей (47 пикселей на моем элементе, который я только что проверил). Это горизонтальная форма с надписью слева 2col и вводом справа 10col. Так что ваши пиксели могут отличаться.

Так как у меня в основном 50px, я бы создал распорку высотой 50px без полей и отступов;

.spacer { margin:0; padding:0; height:50px; }
<div class="spacer"></div>

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

<div class="help-block"></div>

Для версии 3, похоже, нет «загрузочного» способа добиться этого аккуратно.

А panel, А wellи А form-groupобеспечивают некоторое вертикальное расстояние.

Более формальное решение для вертикального разнесения, по-видимому, на дорожной карте для bootstrap v4

https://github.com/twbs/bootstrap/issues/4286#issuecomment-36331550 https://github.com/twbs/bootstrap/issues/13532

Я просто создал класс div, используя различные высоты, т.е.

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

CSS это:

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

Просто создайте класс делителя для того, что когда-либо нужны высоты.

Мой трюк Не элегантно, но работает:

<p>&nbsp;</p>

Просто используйте <br/>. Я оказался здесь в поисках ответа на этот вопрос, а затем почувствовал себя глупо, потому что не думал об использовании простого переноса строки, как предложил пользователь JayKilleen в комментарии.

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

<style>
  .divider{
    margin: 0cm 0cm .5cm 0cm;
  }
</style>

а затем создать div в вашем HTML

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

Я попытался использовать, <div class="control-group">и это не изменило мой макет. Это не добавило вертикальное пространство. Решение, которое работало для меня, было:

<ol style="visibility:hidden;"></ol>

Если это не дает вам достаточно вертикального пространства, вы можете постепенно получать больше, добавляя вложенные <li>&nbsp;</li>теги.

<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

Нет ничего более сухого, чем

.btn {
    margin-bottom:5px;
}