我想在Twitter导航栏中放置一个登录内联表单。
我已经做到了这一点,但我没有设法推动表格正确...... http://jsfiddle.net/v34Sv/
所有Twitter组件(span,offset,pull-right)都失败了,我担心在使用绝对位置时会丢失响应组件。
答案 0 :(得分:11)
使用正确位置的按钮形成内联
<div class="container-fluid">
<div class='navbar'>
<div class='navbar-inner'>
<div class='container-fluid'>
<a class='brand'>Test</a>
<ul class='nav'>
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</ul>
<form class="navbar-form pull-right">
<input type="text" class="span2" placeholder="Login">
<input type="text" class="span2" placeholder="Password">
<input type="submit" value="Login" class="btn"/>
</form>
</div>
</div>
</div>
答案 1 :(得分:9)
按钮不是完美的地方,但至少表格是内联的(我希望它有帮助)。
<div class='navbar'>
<div class='navbar-inner'>
<div class='container-fluid'>
<a class='brand'>Test</a>
<ul class='nav'>
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</ul>
<form class="navbar-search pull-right">
<input type="text" class="span2" placeholder="Login">
<input type="text" class="span2" placeholder="Password">
<input type="submit" value="Login" class="btn"/>
</form>
</div>
</div>
</div>
答案 2 :(得分:4)
类navbar-form就是这样做的。
<form class="navbar-form form-inline pull-right">
<input type="text" placeholder="Email">
<input type="password" placeholder="Password">
<button type="submit" class="btn">Sign in</button>
</form>
答案 3 :(得分:2)
<强> HTML:强>
<div class='navbar'>
<div class='navbar-inner'>
<div class='container-fluid'>
<button type="button" 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>
</button>
<a class='brand'>Test</a>
<ul class='nav nav-collapse collapse'>
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</ul>
<ul class='nav nav-collapse collapse pull-right'>
<li class=""><form class="navbar-search">
<input type="text" class="span2" placeholder="Login">
<input type="text" class="span2" placeholder="Password">
<input type="submit" value="Login" class="btn"/>
</form></li>
</ul>
</div>
<强> CSS:强>
form.login {
border: 1px solid red;
}
form.login input {
height: 14px;
width: 140px;
background: #F5F5F5;
border-radius: 2px;
}
@media (min-width:768px) {
.navbar-search .btn {
margin:-9px 0 0 0;
}
}
<强>的jsfiddle:强>