¿Cómo centro horizontal una forma usando BootStrap?

Question

Hola Estoy intentando colocar un formulario de acceso en el centro de la pantalla utilizando BootStrap 2. He intentado varias combinaciones usando etc. desplazamiento pero no parecen tener suerte anu ..

<div class="row-fluid"> 
    <form action='' method='POST' id='loginForm' class='form-horizontal' autocomplete='off'> 
    ... 
    </form> 
</div> 

Cualquier sugerencias sobre cómo puedo lograr esto?

Answer 1

Simplemente configure las clases para que 2 * offsetClass + span class = 12 columnas.

es decir: .offset4.span4

Answer 2

si desea utilizar el sistema de red de inicio siguiendo @ respuesta de la salmuera. Esto centrará las columnas distribuidas que contienen su formulario. Si quiere que el formulario esté centrado en ese lapso, tendrá que trabajar un poco más, como lo mencionado por @kajo en su comentario sobre su pregunta.

Para explicar la respuesta de @ Pickle, aquí hay un código de muestra que centra un lapso de 4 columnas en la cuadrícula predeterminada de 12 columnas. Si necesita un número diferente de columnas que ocupa, utilice @ fórmula de la salmuera (pero tenga en cuenta el número de columnas extendidos debe ser un número par)

<div class="container"> 
    <div class="row"> 
    <div class="offset4 span4"> 
     .. form goes here .. 
    </div> 
    </div> 
</div> 

Answer 3

Por desgracia, en la actualidad la calidad de offset no funciona correctamente dentro de la elemento fluido de fila.

https://github.com/twitter/bootstrap/pull/2394

Si desea utilizar el elemento de la fila de líquido, se puede añadir un span4 con una etiqueta br en ella antes de que su contenido div.

Answer 4

Después de luchar tanto con este tema central, pude crear mis propios tweeks

CSS:

.control-group.center{ float:none;margin:0 auto;width:400px;margin-bottom:20px;} 
.control-group .field {width:140px;float:left} 
.control-group .l {width:120px;float:left;line-height: 29px;} 
.row-fluid .offset4{ 
    display: block!important; 
    float: none!important; 
    width: 100%!important; 
    margin-left: 0!important; 
    padding:0 80px; 
} 
@media (max-width: 497px){ 
    .control-group.center {text-align: center;float:inherit;width: auto} 
    .control-group .field,.control-group .l {width:120px;float:none;text-align: center;width: auto} 
} 

HTML:

<div class="container"> 
     <div class="row-fluid"> 
     <div class="offset4 span2"> 

      <form class="form-horizontal" action="enviar-pedido.php" method="post"> 
      <fieldset> 
       <legend>Ingrese sus datos:</legend> 
       <div class="control-group center"> 
       <div class="l">Nombre</div> <div class="field"><input type="text" id="txtNombre" name="txtNombre" placeholder="Nombre"></div> 
       </div> 
       <div class="control-group center"> 
       <div class="l">Email</div> <div class="field"><input type="text" id="txtEmail" name="txtEmail" placeholder="Email"></div> 
       </div> 
       <div class="control-group center"> 
       <div class="l">Teléfono</div> <div class="field"><input type="text" id="txtTelefono" name="txtTelefono" placeholder="Telefono"></div> 
       </div> 
      </fieldset> 
      </form> 
     </div> 
     </div> 
    </div> 

Ahora es finalmente siempre centrada, incluso al cambiar el tamaño del navegador (Chrome y Firefox)

Answer 5

Normalmente, todos los tramos flotan hacia la izquierda. Entonces, debes dejarlo flotar en ninguno y luego establecer el margen en automático.

Algo como esto:

<div class="span8" style="float:none; margin:0 auto"></div>