下拉式中心表单Bootstrap？

我在bootstrap中有一个下拉菜单，但我不知道如何将其中的一个窗体居中。下拉式中心表单Bootstrap？

这是我的代码;

<div class="navbar navbar-fixed-top"> 
    <div class="navbar-inner"> 
    <div class="container"> 
     <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </a> 
     <a class="brand" href="#">Testing, 123</a> 
     <div class="nav-collapse"> 
     <ul class="nav"> 
      <li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
      <div class="dropdown-menu"> 
       <form accept-charset="UTF-8" action="/sessions" method="post"> 
       <fieldset class='textbox login'> 
        <label id='js-username'> 
        <span>Username</span> 
        <input autocomplete="on" id="username" name="username" type="text" size="20px"/> 
        </label> 
        <label id='password'> 
        <span>Password</span> 
        <input id="userpassword" name="userpassword" type="password" /> 
        </label> 
       </fieldset> 
       <fieldset class='subchk'> 
        <input name="commit" type="submit" value="Log In" /> 
       </fieldset> 
       </form> 
      </div> 
      </li> 
     </ul> 
     <form class="navbar-search pull-right" action=""> 
      <input type="text" class="search-query span2" placeholder="Search"> 
     </form> 
     </div><!-- /.nav-collapse --> 
    </div><!-- /.container --> 
    </div><!-- /.navbar-inner --> 
</div><!-- /.navbar -->

我已经调整了CSS的下拉宽度以适应我的表单，我只是无法计算出如何在下拉菜单中居中。

来源

2012-04-09 Jack Wilsdon

我不知道你想达到什么。但是尝试将class =“span3”添加到表单标记。 – Altrim 2012-04-09 13:56:21

只需创建一类具有一些填充，并把它添加到您的表单标签，就像这样：

CSS

HTML

<form class="wrap" accept-charset="UTF-8" action="/sessions" method="post">...</form>

演示：http://jsfiddle.net/a52UY/

来源

2012-04-09 21:55:43

布拉赫，这是一个可怕的答案（尽管不如下面那个坏）。这不是集中，它是添加填充。 – umassthrower 2012-07-30 03:17:16

@umassthrower表单居中，填充用于扩展容器，使其不像以前一样压扁。它可以有多少中心？ – 2012-07-30 10:59:13

使用中心的标签可能是帮助你

<center> </center> 


    <div class="dropdown-menu"> 
     <center> 
      <form accept-charset="UTF-8" action="/sessions" method="post"> 

     ....... 

      </form> 
     </center>

来源

2012-04-09 17:00:32 srini

也是一个可怕的答案 – umassthrower 2012-07-30 03:17:04

没有看到你的CSS很难肯定地说，这将工作，但试试这个：

.dropdown-menu form { 
width: *insert form width here in pixels*; 
margin: 0 auto; 
}

这个回答假设与类下拉李较大水平比你的形式，并且你正在尝试将表格居中。要使用此方法水平居中放置东西，它必须具有固定的宽度，并且宽度必须小于父元素（在本例中为具有类下拉的li）。

编辑补充：我不知道这个问题怎么老了，直到后，我回答了..

来源

2013-05-25 18:48:07 Kristy

下拉式中心表单Bootstrap？

回答

相关问题