В 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">
кнопку.источник
.btn-toolbar
, так что вы должны просто добавить новый класс со своими полями.Упаковка работает, но когда вам просто нужно пространство, мне нравится:
источник
Извините, что копаю здесь старую могилу, но почему бы не сделать это?
Это добавит пробел высоту обычного элемента формы.
Кажется, что примерно 1 строка в форме составляет примерно 50 пикселей (47 пикселей на моем элементе, который я только что проверил). Это горизонтальная форма с надписью слева 2col и вводом справа 10col. Так что ваши пиксели могут отличаться.
Так как у меня в основном 50px, я бы создал распорку высотой 50px без полей и отступов;
источник
Я знаю, что это старый, но я пришел сюда в поисках того же самого, я обнаружил, что Bootstrap имеет блок помощи, очень удобный для следующих ситуаций:
источник
Для версии 3, похоже, нет «загрузочного» способа добиться этого аккуратно.
А
panel
, Аwell
и Аform-group
обеспечивают некоторое вертикальное расстояние.Более формальное решение для вертикального разнесения, по-видимому, на дорожной карте для bootstrap v4
https://github.com/twbs/bootstrap/issues/4286#issuecomment-36331550 https://github.com/twbs/bootstrap/issues/13532
источник
Я просто создал класс div, используя различные высоты, т.е.
CSS это:
Просто создайте класс делителя для того, что когда-либо нужны высоты.
источник
Мой трюк Не элегантно, но работает:
источник
Просто используйте
<br/>
. Я оказался здесь в поисках ответа на этот вопрос, а затем почувствовал себя глупо, потому что не думал об использовании простого переноса строки, как предложил пользователь JayKilleen в комментарии.источник
Я знаю, что это старое, и есть несколько хороших решений, уже опубликованных, но простое решение, которое сработало для меня, это следующий CSS
а затем создать div в вашем HTML
источник
Я попытался использовать,
<div class="control-group">
и это не изменило мой макет. Это не добавило вертикальное пространство. Решение, которое работало для меня, было:Если это не дает вам достаточно вертикального пространства, вы можете постепенно получать больше, добавляя вложенные
<li> </li>
теги.источник
http://v4-alpha.getbootstrap.com/components/forms/#form-controls
источник
Нет ничего более сухого, чем
источник