我在 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 中调整了下拉菜单的宽度以适合我的表单,但我不知道如何在下拉列表中居中放置表单。
最佳答案
如果没有看到您的 CSS,很难确定这是否有效,但试试这个:
.dropdown-menu form {
width: *insert form width here in pixels*;
margin: 0 auto;
}
这个答案假定带有类下拉列表的 li 在水平方向上比您的表单大,并且您正试图将表单居中放置在其中。要使用此方法将某些内容水平居中,它必须具有固定宽度,并且宽度必须小于父元素(在本例中为 li 类下拉列表)。
编辑添加:在我回答之前我没有意识到这个问题有多老..
关于html - 下拉 Bootstrap 中的中心表单?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10074172/