Html 下拉引导中的中心窗体?
我在bootstrap中有一个下拉列表,但我不知道如何在其中居中放置表单 这是我的密码Html 下拉引导中的中心窗体?,html,css,twitter-bootstrap,Html,Css,Twitter 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">
<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中调整了下拉列表的宽度以适应我的表单,我只是不知道如何在下拉列表中将表单居中。使用中心标签可能会对您有所帮助
<center> </center>
<div class="dropdown-menu">
<center>
<form accept-charset="UTF-8" action="/sessions" method="post">
.......
</form>
</center>
.......
只需创建一个带有一些填充的类,并将其添加到表单标记中,如下所示:
CSS
.wrap {
padding:15px;
}
HTML
<form class="wrap" accept-charset="UTF-8" action="/sessions" method="post">...</form>
。。。
演示:如果看不到您的CSS,很难确定这是否有效,但请尝试以下方法:
.dropdown-menu form {
width: *insert form width here in pixels*;
margin: 0 auto;
}
这个答案假设带有类下拉列表的li在水平方向上比您的表单大,并且您试图将表单置于其中。若要使用此方法使某个对象水平居中,该对象必须具有固定的宽度,并且宽度必须小于父元素(在本例中,li带有类下拉列表)
编辑添加:直到我回答了这个问题之后,我才意识到这个问题有多老。我不确定你想要实现什么。但是试着将class=“span3”添加到表单标记中。诸如此类,这是一个糟糕的答案(尽管没有下面的答案那么糟糕)。这不是居中,而是添加了填充。@umassthrower表单居中,填充用于扩展容器,使其不会像以前那样挤压在一起。它能有多大的中心?