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

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

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

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

13 ответов:

на Bootstrap 4 здесь spacing utilites.

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

утилиты интервалов, которые применяются ко всем точкам останова, начиная с 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- (by по умолчанию) для классов, которые поставил margin или padding до $spacer
  • 4 - (по умолчанию) для классов, которые поставил margin или padding до $spacer * 1.5
  • 5 - (по умолчанию) для классов, которые поставил margin или padding до $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 имеет help-block, очень удобный для этих ситуаций:

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

для версии 3 не существует способа "bootstrap" для достижения этого аккуратно.

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