ログインインラインフォームをTwitterのナビゲーションバーに配置したい。
私はこれを行いましたが、フォームを正しくプッシュすることができません... http://jsfiddle.net/v34Sv/
すべてのTwitterコンポーネント(スパン、オフセット、プルライト)が失敗し、絶対位置を使用すると応答コンポーネントが失われるのではないかと心配しています。
ログインインラインフォームをTwitterのナビゲーションバーに配置したい。
私はこれを行いましたが、フォームを正しくプッシュすることができません... http://jsfiddle.net/v34Sv/
すべてのTwitterコンポーネント(スパン、オフセット、プルライト)が失敗し、絶対位置を使用すると応答コンポーネントが失われるのではないかと心配しています。
適切な場所にあるボタンとインラインで形成する
<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>
ボタンは完璧な場所にはありませんが、少なくともフォームはインラインです(お役に立てば幸いです)。
<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>
クラス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>
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>
</ p>
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: