Какой лучший способ добавить вертикальное пустое пространство с помощью Twitter-бутстрапа?
Например, скажем, я создаю целевую страницу и хотел бы немного (100 пикселей) пробела пробела выше и ниже определенной кнопки. Очевидно, я мог бы создать определенный класс для этой конкретной кнопки, но я бы подумал, что Bootstrap должен иметь некоторый DRY способ добавления в вертикальные пробелы.
В этом вертикальном пространстве нет ничего встроенного, поэтому вы захотите придерживаться пользовательского класса. Для меньших высот я обычно просто бросаю <div class="control-group">
вокруг кнопки.
Обертка работает, но когда вам просто нужно пространство, мне нравится:
<div class="col-xs-12" style="height:50px;"></div>
Жаль копать старую могилу здесь, но почему бы просто не сделать это?
<div class="form-group">
</div>
Он добавит пробел в высоту элемента нормальной формы.
Кажется, около 1 строки на форме примерно 50 пикселей (47 пикселей на мой элемент, который я только что просмотрел). Это горизонтальная форма, с меткой слева 2col и input на правом 10col. Таким образом, ваши пиксели могут отличаться.
Так как моя в основном 50px, я бы создал проставку высотой 50px без полей или отступов;
.spacer { margin:0; padding:0; height:50px; }
<div class="spacer"></div>
Я знаю, что это старо, но я пришел сюда, ища то же самое, я обнаружил, что Bootstrap имеет блок справки, очень удобный для этих ситуаций:
<div class="help-block"></div>
Для версии 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
В 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
.
Я просто создал 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;
}
Просто создайте класс разделителей, для чего нужны высоты.
Я попытался использовать <div class="control-group">
, и это не изменило мой макет. Он не добавил вертикальное пространство. Решение, которое сработало для меня, было:
<ol style="visibility:hidden;"></ol>
Если это не дает вам достаточно места в вертикальном пространстве, вы можете постепенно увеличивать добавление вложенных тегов <li> </li>
.
Я знаю, что это старо, и есть несколько хороших решений, уже опубликованных, но простое решение, которое сработало для меня
<style>
.divider{
margin: 0cm 0cm .5cm 0cm;
}
</style>
а затем
<div class="divider"></div>
Мой трюк. Не элегантный, но он работает:
<p> </p>
Просто используйте <br/>
. Я нашел себя здесь, чтобы найти ответ на этот вопрос, а затем почувствовал себя глупым, не задумываясь об использовании простой строки, как это предложил пользователь JayKilleen в комментарии.
<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;
}