使用Twitter Bootstrap的中心窗體

我正在使用Twitter的Bootstrap構建窗體（由django提供服務）。我希望以頁面爲中心的形式，但我遇到了一些問題。使用Twitter Bootstrap的中心窗體

這裏是我的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>

我已經排除了一些額外的Django的邏輯（{％csrf_token％}，一些if語句，等等），但是這應該重建問題。

實際的輸入元素（用戶名和密碼文本框）與我預期的一樣居中，但標籤保留在頁面的最左側。我是否在某處丟失標記，或者是否必須重寫某些控件標籤CSS？

來源

2012-04-27 Nitzle

您需要包括一個容器內的形式，引導已經自帶了一個容器類，它是width:940px所以你可以用裏面的一切，它會自動居中，就像這樣：

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

來源

2012-04-27 15:03:00

我忘了提到我已經在「容器」類中包裝了所有東西，而且我仍然得到相同的結果。我只是沒有將它包含在我的（修改過的）示例中。我編輯了我的原始評論以反映這一點（我嘗試複製/粘貼我在測試頁面中的所有內容，但它仍然不居中）。 – Nitzle 2012-04-27 15:13:02

@Nitzle是的，這是因爲控件組向左浮動，您可以通過簡單地降低'span'標籤容器寬度並居中來輕鬆獲得您要查找的結果，而不是像這樣：http：// jsfiddle .net/PSMwt/1/ – 2012-04-27 15:26:22

這似乎工作，但我也通過添加文本對齊：中心;保證金：0汽車;到「span12」包裝，並添加「寬度：400px;邊距：0自動;到窗體標籤，像這樣：http://jsfiddle.net/uvNVY/ – Nitzle 2012-04-27 15:33:40

使用Twitter Bootstrap的中心窗體

回答

相關問題