Centre de Formulaire à l'aide de Twitter Bootstrap

Je suis à l'aide de Twitter Bootstrap pour créer un formulaire (servi par django). Je veux avoir le formulaire centré sur la page, mais je suis en cours d'exécution dans certains problèmes.

Voici mon code HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Form</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="/bootstrap/css/bootstrap.css" rel="stylesheet">
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
</style>
<link href="/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<div class="span12" style="text-align:center; margin: 0 auto;">
<form class="form-horizontal" method="post" action="/form/">
<fieldset>
<legend>Please login</legend>
<div class="control-group">
<label class="control-label" for="id_username">Username</label>
<div class="controls">
<input name="username" maxlength="100" placeholder="Enter your username..." type="text" class="input-large" id="id_username" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="id_password">Password</label>
<div class="controls">
<input name="password" maxlength="100" placeholder="Enter your password..." type="password" class="input-large" id="id_password" />
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="/bootstrap/js/jquery.js"></script>
<script src="/bootstrap/js/bootstrap-transition.js"></script>
<script src="/bootstrap/js/bootstrap-alert.js"></script>
<script src="/bootstrap/js/bootstrap-modal.js"></script>
</body>
</html>

J'ai exclu supplémentaire django logique ({% csrf_token %}, si certains états, etc), mais cela devrait recréer le problème.

L'entrée effective des éléments (nom d'utilisateur et le mot de passe de zones de texte) sont de centrage comme je m'y attendais, mais les étiquettes restent à l'extrême gauche de la page. Suis-je manque de balisage quelque part ou dois-je remplacer certaines des control-label CSS?

OriginalL'auteur Nitzle | 2012-04-27

  1. 18

    Vous devez inclure votre formulaire à l'intérieur d'un conteneur, le bootstrap est livré avec une classe de conteneur qui est width:940px de sorte que vous pouvez envelopper le tout à l'intérieur et il va le centre automatiquement, comme suit:

    <div class="container">
<div class="row">
<div class="span12">
<form class="form-horizontal" method="post" action="/form/">
<fieldset>
<legend>Please login</legend>
<div class="control-group">
<label class="control-label" for="id_username">Username</label>
<div class="controls">
<input name="username" maxlength="100" placeholder="Enter your username..." type="text" class="input-large" id="id_username" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="id_password">Password</label>
<div class="controls">
<input name="password" maxlength="100" placeholder="Enter your password..." type="password" class="input-large" id="id_password" />
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
    J'ai oublié de mentionner que j'ai déjà tout enveloppé dans le "contenant" de la classe, et je suis toujours à obtenir les mêmes résultats. Je ne l'ai pas inclus dans ma (modifié) de l'échantillon. J'ai édité mon commentaire d'origine afin de refléter ceci (j'ai essayé de copier/coller de tout ce que j'avais dans une page de test, et il n'est pas encore le centrage).
    ouais c'est parce que les groupes de contrôle est lancée vers la gauche, vous pouvez facilement obtenir les résultats que vous cherchez simplement en abaissant le span balise contenant la largeur et de centrage qui au lieu de cela, comme ceci: jsfiddle.net/PSMwt/1
    Qui n'a l'air de fonctionner, cependant je également réussi à le faire fonctionner en ajoutant text-align:center; margin: 0 auto; "span12" de l'emballage, et en ajoutant "width: 400px; margin: 0 auto; pour la balise de formulaire, comme ceci: jsfiddle.net/uvNVY
    à droite, à peu près la même approche, la largeur de la span6 classe est 460px.
    Je reçois un autre problème comme un résultat de centrage de ce formulaire. J'ai inclus une case et la case à cocher semble maintenant se positionner trop près de la "label", comme on le voit ici: jsfiddle.net/VuaYz/2 des idées?

    OriginalL'auteur Andres Ilich