Twitter-Bootstrap: login form in navbar

Question

I want to place a login inline-form in a twitter navbar.

I have done this but I don't manage to push the form right... http://jsfiddle.net/v34Sv/

All twitter components (span, offset, pull-right) fail and I am worried loosing the responsive component when using an absolute position.

Answer 1

form inline with button in the right place

<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>

Answer 2

The button is not in the perfect place but at least the form is inline (I hope it helps).

<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>

Answer 3

The class navbar-form is made for just this.

<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>

Taken from http://examples.getbootstrap.com/jumbotron/index.html?