Modulo centrale tramite Twitter Bootstrap

Sto utilizzando il Bootstrap di Twitter per creare un modulo (servito da django). Voglio avere il modulo centrato sulla pagina ma sto incontrando alcuni problemi.Modulo centrale tramite Twitter Bootstrap

Ecco il mio 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>

Ho escluso una logica Django supplementare ({% csrf_token%}, alcuni se le dichiarazioni, ecc), ma questo dovrebbe ricreare il problema.

Gli elementi di input effettivi (caselle di testo username e password) sono centrati come mi aspettavo, ma le etichette restano all'estrema sinistra della pagina. Mi manca il markup da qualche parte o devo scavalcare alcuni dei CSS di etichette di controllo?

fonte

2012-04-27 Nitzle

È necessario includere il modulo all'interno di un contenitore, il bootstrap viene fornito già con una classe contenitore che è width:940px in modo da poter avvolgere tutto dentro e sarà centrare automaticamente, in questo modo:

<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>

fonte

2012-04-27 15:03:00

ho dimenticato di dire che ho già tutto avvolto nella classe "contenitore", e sto ancora ottenendo gli stessi risultati. Non l'ho incluso nel mio esempio (modificato). Ho modificato il mio commento originale per riflettere questo (ho provato a copiare/incollare tutto ciò che avevo in una pagina di prova, e non è ancora centrato). – Nitzle

@Nitzle sì, perché i gruppi di controllo sono flottati a sinistra, puoi facilmente ottenere i risultati che stai cercando semplicemente abbassando la larghezza del contenitore di tag 'span' e centrandola invece, come questa: http: // jsfiddle .net/PSMwt/1/ –

Sembra funzionare, ma ho anche funzionato aggiungendo text-align: center; margine: 0 auto; al wrapper "span12" e aggiungendo "width: 400px; margin: 0 auto; al tag form, come questo: http://jsfiddle.net/uvNVY/ – Nitzle

Modulo centrale tramite Twitter Bootstrap

risposta

Problemi correlati