twitter-bootstrap - twittear - escribir en twitter

Agregue espacio en blanco vertical usando twitter bootstrap

Question

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

Por ejemplo, digamos que estoy creando una página de aterrizaje y me gustaría un poco (100px) de espacio en blanco en blanco arriba y debajo de un cierto botón. Obviamente, podría crear una determinada clase para ese botón en particular, pero creo que Bootstrap debería tener alguna forma DRY de agregar espacios en blanco verticales.

Answer 1

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

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

Answer 2

En Bootstrap 4 hay utilidades de espaciado .

Citando la documentación para notación usada :

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

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

Donde la propiedad es una de:

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

Donde lados es uno de:

• t - para las clases que establecen margin-top o padding-top
• b - para las clases que establecen margin-bottom o padding-bottom
• l - para las clases que establecen margin-left o padding-left
• r - para las clases que establecen margin-right o padding-right
• x - para las clases que establecen tanto *-left como *-right
• y - para las clases que establecen tanto *-top como *-bottom
• blanco: para las clases que establecen un margin o padding en los 4 lados del elemento

Donde el tamaño es uno de:

• 0 - para las clases que eliminan el margen o relleno al configurarlo en 0
• 1 - (de manera predeterminada) para las clases que establecen el margin o padding en $spacer * .25
• 2 - (de forma predeterminada) para las clases que establecen el margin o padding en $spacer * .5
• 3 - (de forma predeterminada) para las clases que establecen el margin o padding en $spacer
• 4 - (de forma predeterminada) para las clases que establecen el margin o padding en $spacer * 1.5
• 5 - (de forma predeterminada) para las clases que establecen el margin o padding en $spacer * 3

Entonces, para tener un poco de espacio vertical adicional encima y debajo de un elemento, usarías my-5 class.

Answer 3

Intenté usar <div class="control-group"> y no modificó 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 aumentar gradualmente al agregar etiquetas <li>&nbsp;</li> anidadas.

Answer 4

Mi truco No es elegante, pero funciona:

<p>&nbsp;</p>

Answer 5

No hay nada más SECO que

.btn {
    margin-bottom:5px;
}

Answer 6

Para la versión 3, no parece haber una forma de "arranque" para lograr esto de forma clara.

Un panel , un well y un form-group proporcionan un espaciado vertical.

Una solución de espaciado vertical específica más formal es, aparentemente, en la hoja de ruta para bootstrap v4

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

Answer 7

Perdón por cavar una tumba vieja aquí, pero ¿por qué no solo hacer esto?

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

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

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

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

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

Answer 8

Sé que esto es antiguo y que ya se han publicado varias buenas soluciones, pero una solución simple que funcionó para mí

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

y entonces

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

Answer 9

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>

Answer 10

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;

}

Solo crea una clase de divisor para cualquier altura que se necesite.

Answer 11

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

Answer 12

No hay nada incorporado en ese espacio vertical, por lo que querrá seguir con una clase personalizada. Para alturas más pequeñas, suelo lanzar un <div class="control-group"> alrededor de un botón.

Answer 13

<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