Додати вертикальний пробіл за допомогою Twitter Bootstrap?

Який найкращий спосіб додати вертикальний пробіл за допомогою Bootstrap Twitter?

Наприклад, скажімо, що я створюю цільову сторінку і хотів би трохи (100 пікселів) порожнього пробілу над і під певною кнопкою. Очевидно, я міг створити певний клас саме для цієї кнопки. Але я думаю, що Bootstrap повинен мати сухий спосіб додавання у вертикальні порожні пробіли.

У 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
• blank - для класів, які встановлюють 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">кнопку навколо.

Обгортання працює, але коли ви просто хочете місця, мені подобається:

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

Вибачте, щоб тут копати стару могилу, але чому б просто не зробити цього?

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

Це додасть простору висоту нормального елемента форми.

Здається, приблизно 1 рядок у формі приблизно 50 пікселів (47 пікселів на моєму елементі, який я щойно перевірив). Це горизонтальна форма, з ліворуч 2col і написом праворуч 10col. Тож ваші пікселі можуть відрізнятися.

Оскільки у мене в основному 50 пікс., Я б створив прокладку заввишки 50 пікселів без запасів і прокладок;

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

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

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

Для версії 3, здається, не існує способу "чіткого завантаження", щоб це досягти акуратно.

A panel, a wellі form-groupall забезпечують деякий вертикальний інтервал.

Більш офіційне специфічне рішення щодо вертикального проміжку, мабуть, знаходиться в дорожній карті для завантажувального пристрою v4

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

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

Просто створіть клас дільника для будь-якої висоти.

Мій трюк. Не елегантно, але це працює:

<p>&nbsp;</p>

Просто використовуйте <br/>. Я опинився тут, шукаючи відповідь на це питання, а потім відчув себе якось дурним, що не думав про використання простого розриву рядків, як запропонував користувач JayKilleen у коментарі.

Я знаю, що це старе і вже є кілька хороших рішень, які вже розміщені, але просте рішення, яке працювало для мене, - це наступний CSS

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

а потім створіть div у своєму HTML

<div class="divider"></div>

Я спробував використовувати, <div class="control-group">і це не змінило мою схему. Це не додало вертикального простору. Рішення, яке працювало для мене:

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

Якщо це не дає достатнього вертикального простору, ви можете поступово отримувати більше, додаючи вкладені <li>&nbsp;</li>теги.

<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;
}