Добавить вертикальное пустое пространство, используя twitter bootstrap

Ответ 1

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

Ответ 2

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

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

Ответ 3

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

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

Он добавит пробел в высоту элемента нормальной формы.

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

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

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

Ответ 4

Для версии 3 не существует способа "начальной загрузки" для достижения этой цели.

A panel, a well и a form-group все обеспечивают некоторый вертикальный интервал.

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

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

Ответ 5

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

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

Ответ 6

В Bootstrap 4 есть интервал использования.

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

Утилиты Spacing, которые применяются ко всем точкам останова, от 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
• blank - для классов, которые устанавливают 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.

Ответ 7

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

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

CSS:

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

}

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

Ответ 8

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

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

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

Ответ 9

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

<p>&nbsp;</p>

Ответ 10

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

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

а затем

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

Ответ 11

<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

Ответ 12

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

Ответ 13

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

.btn {
    margin-bottom:5px;
}