¿Agregar espacios en blanco verticales usando Twitter Bootstrap?

¿Cuál es la mejor manera de agregar espacios en blanco verticales usando Bootstrap de Twitter?

Por ejemplo, supongamos que estoy creando una página de destino y me gustaría un poco (100px) de espacios en blanco en blanco encima y debajo de un botón determinado. Obviamente, podría crear una clase determinada para ese botón en particular. Pero, creo que Bootstrap debería tener una forma SECA de agregar espacios en blanco verticales.

En Bootstrap 4 hay utilidades de espaciado .

Citando la documentación para la notación usada :

Las utilidades de espaciado que se aplican a todos los puntos de interrupción, desde xshasta xl, no tienen abreviatura de punto de interrupción en ellas. Esto se debe a que esas clases se aplican desde min-width: 0arriba y, por lo tanto, no están vinculadas por una consulta de medios. Los puntos de interrupción restantes, sin embargo, incluyen una abreviatura de punto de interrupción.

Las clases se denominan utilizando el formato {property}{sides}-{size}de xs y {property}{sides}-{breakpoint}-{size}para sm, md, lg, y xl.

Donde la propiedad es uno de:

• m - para clases que establecen margin
• p - para clases que establecen padding

Donde lados es uno de:

• t- para clases que establecen margin-topopadding-top
• b- para clases que establecen margin-bottomopadding-bottom
• l- para clases que establecen margin-leftopadding-left
• r- para clases que establecen margin-rightopadding-right
• x- para clases que establecen ambos *-lefty*-right
• y- para clases que establecen ambos *-topy*-bottom
• en blanco: para las clases que establecen un margino paddingen los 4 lados del elemento

Donde el tamaño es uno de:

• 0 - para clases que eliminan el margen o el relleno al configurarlo en 0
• 1- (por defecto) para las clases que establecer la margino paddingde$spacer * .25
• 2- (por defecto) para las clases que establecer la margino paddingde$spacer * .5
• 3- (por defecto) para las clases que establecer la margino paddingde$spacer
• 4- (por defecto) para las clases que establecer la margino paddingde$spacer * 1.5
• 5- (por defecto) para las clases que establecer la margino paddingde$spacer * 3

Entonces, para tener un espacio vertical adicional sobre y debajo de un elemento, usaría my-5class.

En v2, no hay nada incorporado para tanto espacio vertical, por lo que querrás seguir con una clase personalizada. Para alturas más pequeñas, generalmente solo tiro <div class="control-group">un botón.

El ajuste funciona, pero cuando solo quieres un espacio, me gusta:

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

Lamento cavar una tumba vieja aquí, pero ¿por qué no hacer esto?

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

Agregará un espacio a la altura de un elemento de forma normal.

Parece que aproximadamente 1 línea en un formulario tiene aproximadamente 50 px (47 px en mi elemento que acabo de inspeccionar). Esta es una forma horizontal, con etiqueta a la izquierda 2col y entrada a la derecha 10col. Entonces sus píxeles pueden variar.

Como el mío es básicamente de 50 px, crearía un espaciador de 50 px de alto sin márgenes ni relleno;

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

Sé que esto es viejo, pero vine aquí buscando lo mismo, encontré que Bootstrap tiene el bloque de ayuda, muy útil para estas situaciones:

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

Para la versión 3, no parece haber una forma "bootstrap" de lograrlo de manera clara.

A panel, a welly a form-groupproporcionan un cierto espacio vertical.

Aparentemente, una solución de espaciado vertical específico más formal está en la hoja de ruta para bootstrap v4

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

Simplemente creé una clase div usando varias alturas, es decir

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

El CSS es:

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

Simplemente cree una clase divisoria para cualquier altura que se necesite.

Mi truco No es elegante, pero funciona:

<p>&nbsp;</p>

Solo úsalo <br/>. Me encontré aquí buscando la respuesta a esta pregunta y luego me sentí un poco tonto por no pensar en usar un salto de línea simple como lo sugirió el usuario JayKilleen en un comentario.

Sé que esto es antiguo y hay varias buenas soluciones ya publicadas, pero una solución simple que funcionó para mí es el siguiente CSS

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

y luego crea un div en tu html

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

Intenté usarlo <div class="control-group">y no cambió mi diseño. No agregó espacio vertical. La solución que funcionó para mí fue:

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

Si eso no le da suficiente espacio vertical, puede obtener más de forma incremental agregando <li>&nbsp;</li>etiquetas anidadas .

<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

No hay nada más SECO que

.btn {
    margin-bottom:5px;
}