使用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的中心窗体

回答

相关问题