Estoy diseñando una pantalla de inicio de sesión, y en esa pantalla solo habrá un recuadro con LOGIN y PASSWORD. Necesito centralizar vertical y horizontalmente (como cualquier pantalla de inicio de sesión tradicional).Cómo centrar un recuadro en Twitter Bootstrap
¿Cómo puedo lograr esto con Twitter Bootstrap?
Gracias!
Si está utilizando la rejilla de arranque, entonces se puede compensar sus columnas:
<div class="row">
<div class="span6 offset3">
Your content goes here
</div>
</div>
Véase el ejemplo aquí: http://twitter.github.com/bootstrap/scaffolding.html#gridSystem
O simplemente puede utilizar CSS para centro de elemento de bloque, simplemente,
div.login-box{
margin:0 auto;
width: 720px;
}
ACTUALIZAR a la respuesta de Johny: Para Bootstrap 3; la sintaxis es un poco diferente:
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
Your content goes here
</div>
</div>
o: mejor aún:
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
Your content goes here
</div>
</div>
</div>
Pero, ¿Se puede lograr un comportamiento que responde con su segundo enfoque? – dennisbot
Puede usar simplemente varias consultas de medios CSS para establecer un ancho diferente para diferentes resoluciones. O puede experimentar con el porcentaje de ancho, por ejemplo. 70% – Johny
No creo que esto responda a la pregunta porque la primera opción es un desplazamiento (no centrado realmente), y la segunda opción no usa Bootstrap. – felwithe