Добавить вертикальный пробел с помощью Twitter Bootstrap?

162

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

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

Райан
источник

Ответы:

39

В 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класс.

VLP
источник
3
Не могли бы вы привести пример допустимой строки класса?
Каньон Колоб
Ницца! Это круто.
Тики
51

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

jmdeldin
источник
8
или <div class = "btn-toolbar">
дюркавец
9
Спасибо. Теперь я создал несколько классов spacer10, spacer50 и т. Д. Для этого использования. Я вижу, что в github уже есть запрос функции: bit.ly/R9oap9
Ryan
1
@ Райан: Хорошо, не видел запрос на получение. Я немного противоречу этому. Bootstrap почти полностью презентационный (и удобный), но если вы щуритесь достаточно сильно, чтобы игнорировать весь лишний HTML, вы можете извлечь из него семантику. Вертикальный интервал является чисто презентационным, поэтому я думаю, что лучше всего это сделать с помощью специального класса / идентификатора.
jmdeldin
2
Это было для v2, но похоже, что v3 минимизировал интервал .btn-toolbar, так что вы должны просто добавить новый класс со своими полями.
jmdeldin
3
По-видимому, запрос функции github был закрыт, и функция может сделать это в Bootstrap v4. bit.ly/R9oap9
Райан
48

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

<div class="col-xs-12" style="height:50px;"></div>
скрытое имя пользователь
источник
16
Добавление встроенного стиля при работе с Bootstrap, как правило, не очень хорошая идея. По крайней мере, это должно войти в CSS.
alexykot
2
обратите внимание, что «col-xs-12» - это то же самое, что вообще не иметь классов
Soldeplata Saketos
34

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

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

Это добавит пробел высоту обычного элемента формы.

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

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

.spacer { margin:0; padding:0; height:50px; }
<div class="spacer"></div>
брод
источник
1
Это добавляет пространство ниже группы, но не выше
icc97
Конечно, это именно то, что он просил, способ добавить вертикальное пустое пространство. Если вам нужна пользовательская группа форм, строка или даже кнопка, создайте собственный класс, добавив к нему поля, переопределяя поля. Т.е.: class = "form-group spaced-group" и ".spaced-group {margin-top: 15px! Важный; margin-bottom: 15px! Важный;}. Это просто обычный css-sense.
Уэйд
ОП специально спросил: «немного (100 пикселей) пустого пробела выше и ниже определенной кнопки»
icc97
1
Нет, это был пример, а не его вопрос. Его вопрос звучал так: «Какой лучший способ добавить пустое пространство по вертикали с помощью Twitter Bootstrap?» - пустое пространство по вертикали отличается от поля для конкретного элемента. Если бы он делал это для всех кнопок, он мог бы изменить поле btn или сделать свой собственный класс похожим на «btn-spaced» со своими желаемыми полями. Если он просто хочет как-то добавить пробел, где ему захочется, ему нужна проставка фиксированной высоты, как я и ответил. Он задал один вопрос и привел пример другого. Я предположил, что он знает CSS достаточно, чтобы знать, что он может переопределить поля.
Уэйд
Так как он сказал метод СУХОЙ и кнопку, я бы создал класс кнопки с полями, которые я хотел: btn-spaced. Если бы не только кнопки, то общий запас, который будет применяться к строкам, группам форм и т. Д. Например, class = "row space-small" или class = "form-group space-medium". Где small medium и large являются всего лишь вариантами полей и могут применяться практически ко всему. - Трудно сказать, какой опера хочет. Только для кнопок или просто для любого элемента ..
Уэйд
24

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

<div class="help-block"></div>
Пересекать
источник
21

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

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

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

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

ErichBSchulz
источник
5
.form-group кажется лучшим выбором, так как css ограничен margin-bottom: 15px. .well и .panel не должны использоваться, если вы хотите просто добавить некоторый интервал, поскольку у них есть другие атрибуты (такие как фон, отступы, границы и т. д.)
xaa
9

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

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

user5593012
источник
8

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

<p>&nbsp;</p>
asiniy
источник
2
@JayKilleen +1 Вы должны опубликовать это как ответ. Возможно, люди начинают полагаться на рамки и начали забывать основы.
ADJenks
5

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

ADJenks
источник
Недостатком является то, что вы не получаете точный контроль 100px, но он, безусловно, должен работать, чтобы добавить разумное количество места.
mix3d
1
@ mix3d, ты тут, я сначала не заметил, что он заботился о том, чтобы он был точно 100px. Я думал, что он просто хотел "немного". Он мог определенно сделать свой собственный класс помощника, как все предложили. Но так как этому посту так много лет, теперь он может просто перейти на bootstrap 4 для точного интервала или взять из него вспомогательные классы.
ADJenks
5

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

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

а затем создать div в вашем HTML

<div class="divider"></div>
Санджив
источник
4

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

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

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

Джон Эрк
источник
Спасибо, и ваше предложение будет работать с или без Bootstrap. Но вопрос был конкретно об использовании Twitter Bootstrap для добавления пробелов.
Джонатан
1
<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
Как это ответ на вопрос?
Мэтт С
Он добавляет вертикальный интервал, как и требовалось в оригинальном постере, и разработчики начальной загрузки теперь поддерживают его в последней версии (4) в бета-состоянии. Это на самом деле правильный ответ, и если вы начнете гуглить вертикальный интервал в начальной загрузке, вы увидите, что он ранее не учитывался. Пожалуйста, не отрицайте то, что вы не проверяли и не гуглили.
День
Вы явно не читали вопрос. «Я хотел бы немного (100px) пустого пустого пространства выше и ниже определенной кнопки». Определенная кнопка ... определенная кнопка ...
Matt S
1
Перед этим он сказал: «Например, скажем». Это был просто пример, это не была конкретная проблема. Не цитируйте вне контекста. Пример, который я привел, достаточно, и вся информация, которую я дал, адекватна.
Ден
-3

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

.btn {
    margin-bottom:5px;
}
pH 7
источник
13
Я бы не рекомендовал изменять стиль базовых классов начальной загрузки CSS.
Джеймс Палавага
1
@JamesPalawaga +1. Но если бы это было общим стандартом для вашего приложения, вы могли бы переопределить стили начальной загрузки, используя LESS и переменные и / или тщательно управляемые таблицы стилей переопределения.
Джонатан