Adicionar espaço em branco vertical usando o Twitter Bootstrap?

Qual é a melhor maneira de adicionar espaço em branco vertical usando o Bootstrap do Twitter?

Por exemplo, digamos que estou criando uma página de destino e gostaria de um pouco (100px) de espaço em branco acima e abaixo de um determinado botão. Obviamente, eu poderia criar uma certa classe para esse botão específico. Mas, eu acho que o Bootstrap deve ter uma maneira SECA de adicionar espaços em branco verticais.

No Bootstrap 4, existem utilitários de espaçamento .

Citando a documentação para notação usada :

Os utilitários de espaçamento que se aplicam a todos os pontos de interrupção, de xspara xl, não possuem nenhuma abreviação de ponto de interrupção. Isso ocorre porque essas classes são aplicadas a partir min-width: 0e para cima e, portanto, não são vinculadas por uma consulta de mídia. Os pontos de interrupção restantes, no entanto, incluem uma abreviação de ponto de interrupção.

As aulas são nomeados usando o formato {property}{sides}-{size}de xs e {property}{sides}-{breakpoint}-{size}para sm, md, lge xl.

Onde a propriedade é uma das seguintes:

• m - para classes que definem margin
• p - para classes que definem padding

Onde lados é um dos seguintes:

• t- para classes que definem margin-topoupadding-top
• b- para classes que definem margin-bottomoupadding-bottom
• l- para classes que definem margin-leftoupadding-left
• r- para classes que definem margin-rightoupadding-right
• x- para classes que definem ambos *-lefte*-right
• y- para classes que definem ambos *-tope*-bottom
• em branco - para classes que definem um marginou paddingnos quatro lados do elemento

Onde o tamanho é um dos seguintes:

• 0 - para classes que eliminam a margem ou o preenchimento, definindo-o como 0
• 1- (por padrão) para as classes que definir o marginou paddinga$spacer * .25
• 2- (por padrão) para as classes que definir o marginou paddinga$spacer * .5
• 3- (por padrão) para as classes que definir o marginou paddinga$spacer
• 4- (por padrão) para as classes que definir o marginou paddinga$spacer * 1.5
• 5- (por padrão) para as classes que definir o marginou paddinga$spacer * 3

Portanto, para ter um espaço vertical extra acima e abaixo de um elemento, você usaria my-5classe.

Na v2, não há nada embutido em tanto espaço vertical, portanto, você deve ficar com uma classe personalizada. Para alturas menores, geralmente eu apenas aperto <div class="control-group">um botão.

O empacotamento funciona, mas quando você só quer um espaço, eu gosto de:

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

Desculpe cavar uma cova velha aqui, mas por que não fazer isso?

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

Ele adicionará um espaço à altura de um elemento de formulário normal.

Parece que cerca de 1 linha de um formulário tem aproximadamente 50 px (47 px no meu elemento que acabei de inspecionar). Esta é uma forma horizontal, com etiqueta à esquerda 2col e entrada à direita 10col. Portanto, seus pixels podem variar.

Como o meu tem basicamente 50px, eu criaria um espaçador de 50px de altura, sem margens ou preenchimento;

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

Sei que isso é antigo, mas vim aqui procurando a mesma coisa, descobri que o Bootstrap tem o bloco de ajuda, muito útil para estas situações:

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

Para a versão 3, parece não haver uma maneira "de autoinicialização" para conseguir isso perfeitamente.

A panel, a welle a form-grouptodos fornecem algum espaçamento vertical.

Uma solução de espaçamento vertical específico mais formal está, aparentemente, no roteiro do bootstrap v4

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

Eu apenas criei uma classe div usando várias alturas, ou seja,

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

O CSS é:

.divider-10 {
    width:100%; 
    min-height:1px; 
    margin-top:10px; 
    margin-bottom:10px;  
    display:inline-block; 
    position:relative;
}

Basta criar uma classe divisória para o que for necessário.

O meu truque. Não é elegante, mas funciona:

<p>&nbsp;</p>

Apenas use <br/>. Eu me encontrei aqui procurando a resposta para essa pergunta e me senti meio bobo por não pensar em usar uma quebra de linha simples, como sugerido pelo usuário JayKilleen em um comentário.

Sei que isso é antigo e que já existem várias soluções boas, mas uma solução simples que funcionou para mim é o seguinte CSS

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

e crie uma div no seu html

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

Eu tentei usar <div class="control-group">e não mudou meu layout. Não adicionou espaço vertical. A solução que funcionou para mim foi:

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

Se isso não fornecer espaço vertical suficiente, você poderá obter mais incrementalmente adicionando <li>&nbsp;</li>tags aninhadas .

<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

Não há nada mais SECO do que

.btn {
    margin-bottom:5px;
}