Twitter-Bootstrap:导航栏中的登录表单

dev*_*pus 10 twitter-bootstrap

我想在Twitter导航栏中放置登录内联表单.

我已经做到了这一点,但我没有设法推动表格正确... http://jsfiddle.net/v34Sv/

所有的Twitter组件(span,offset,pull-right)都失败了,我担心在使用绝对位置时会丢失响应组件.

小智 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>
Run Code Online (Sandbox Code Playgroud)


Pig*_*ras 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>
Run Code Online (Sandbox Code Playgroud)