Добавить вертикальное пустое пространство с помощью Twitter bootstrap

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

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

144
twitter-bootstrap twitter-bootstrap-2 vertical-alignment

13 ответов

на Bootstrap 4 здесь интервал utilites.

со ссылкой на документация для обозначения:

Spacing utilities, которые применяются ко всем точкам останова, от 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 to $spacer * .25
  • 2 - (по умолчанию) для классов, которые поставил margin или padding to $spacer * .5
  • 3 - (by по умолчанию) для классов, которые поставил margin или padding to $spacer
  • 4 - (по умолчанию) для классов, которые поставил margin или padding to $spacer * 1.5
  • 5 - (по умолчанию) для классов, которые поставил margin или padding to $spacer * 3

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

18

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

51

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

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

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

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

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

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

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

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

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

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

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

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

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

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

20

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

<p>&nbsp;</p>
7

Я просто создал класс 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;

}

просто создайте класс разделителя для каких-либо высот.

6

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

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

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

4

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

4

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

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

а то

<div class="divider"></div>
3
<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

1

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

.btn {
    margin-bottom:5px;
}
-3