下拉Bootstrap中的中心表格？答案

【问题标题】：Center form in dropdown Bootstrap?下拉Bootstrap中的中心表格？
【发布时间】：2013-05-26 02:48:07
【问题描述】：

我在引导程序中有一个下拉菜单，但我不知道如何将其中的表单居中。

这是我的代码；

<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 中下拉菜单的宽度以适合我的表单，但我只是不知道如何在下拉菜单中居中显示表单。

【问题讨论】：

我不确定你想要达到什么目的。但是尝试将 class="span3" 添加到表单标签中。

标签： html css twitter-bootstrap

【解决方案1】：

如果没有看到你的 CSS，很难确定这会起作用，但试试这个：

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

此答案假定带有类下拉列表的 li 在水平方向上大于您的表单，并且您正试图将表单置于其中的中心。要使用此方法水平居中，它必须具有固定宽度，并且宽度必须小于父元素（在本例中为带有类下拉列表的 li）。

编辑添加：直到我回答了这个问题之后，我才意识到这个问题有多老..

【讨论】：

【解决方案2】：

只需创建一个带有一些填充的类并将其添加到您的表单标签中，如下所示：

CSS

.wrap {
    padding:15px;
}

HTML

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

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

【讨论】：

废话，这是一个糟糕的答案（尽管没有下面的那么糟糕）。这不是居中，而是添加填充。
@umassthrower 表单居中，填充用于扩展容器，因此不会像以前那样挤在一起。可以有多少中心？

【解决方案3】：

使用中心标签可能对你有帮助

    <center>  </center>


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

         .......

          </form>
         </center>

【讨论】：