Comment horizontal au centre d'un formulaire à l'aide de BootStrap?

Salut à tous, je suis en train de positionner un formulaire de connexion dans le milieu de l'écran à l'aide de BootStrap 2. J'ai essayé plusieurs combinaisons à l'aide d'offset etc. Mais je ne semble pas avoir anu chance..

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

Des suggestions sur comment je peux faire?

et que dire de façon classique? avez-vous essayé margin: 0 auto; position:absolute;left:50%; ?

OriginalL'auteur Marco | 2012-02-28

14

si vous souhaitez utiliser le système de grille de départ en suivant @Cornichon de réponse. Ce centre de fractionné des colonnes qui contiennent votre formulaire. Si vous souhaitez que le formulaire centrée w/dans cette durée, vous devrez faire un peu plus de travail telles que les choses mentionnées par @kajo dans son commentaire sur votre question.

D'élaborer sur @Cornichon réponse, voici un exemple de code que les centres d'une portée de 4 colonnes par défaut dans les 12 colonnes de la grille. Si vous avez besoin d'un nombre différent de colonnes occupées, utilisez @Cornichon de formule (mais gardez en tête que votre numéro de fractionné colonnes doit être un nombre pair)
```
<div class="container">
  <div class="row">
    <div class="offset4 span4">
      .. form goes here ..
    </div>
  </div>
</div>
```
OriginalL'auteur csturtz
5

Normalement, tous les travées sont flottait à gauche. Donc, vous avez à flotter à aucun et puis définissez la marge d'auto.

Quelque chose comme ceci:
```
 <div class="span8" style="float:none; margin:0 auto"></div>
```
La seule réponse sensée. J'ai fait une classe css appelé center et a ajouté width: 100% et maintenant ça fonctionne pour tout, y compris form-horizontal dl-horizontal spanN etc tout en restant à l'écoute. Génial!
La bonne réponse à cette question! Il doit être marqué comme.

OriginalL'auteur PersianMan
3

Viens de mettre les classes en 2 * offsetClass + span class = 12 colonnes.

ie: .offset4.span4

OriginalL'auteur Pickle
0

Malheureusement, actuellement, le décalage de la classe ne fonctionne pas correctement à l'intérieur de la ligne d'en-élément liquide.

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

Si vous souhaitez utiliser la ligne-élément liquide, vous pouvez ajouter un span4 avec une balise br en avant votre contenu div.

OriginalL'auteur Gabe K

Après avoir lutté tellement avec ce centre de problème, j'ai réussi à créer mon propre 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>

Maintenant, il est enfin jamais centré, même lors du redimensionnement du navigateur (Chrome et Firefox)

OriginalL'auteur Junior M

Vous devez vous connecter pour publier un commentaire.