2012-04-27 63 views
16

我正在使用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?

回答

17

您需要包括一個容器內的形式,引導已經自帶了一個容器類,它是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> 
+1

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

+0

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

+0

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