Twitter-Bootstrap: formulario de inicio de sesión en navbar

Question

Quiero colocar un inicio de sesión en línea en una barra de navegación de Twitter.

he hecho esto pero no logran hacer a la forma correcta ... http://jsfiddle.net/v34Sv/

Todos los componentes de Twitter (palmo, offset, Pull-derecha) fallar y me preocupa perder el componente sensible cuando usando una posición absoluta.

Answer 1

El botón no está en el lugar perfecto, pero al menos el formulario está en línea (espero que ayude).

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

http://jsfiddle.net/baptme/v34Sv/5/

Answer 3

formulario en línea con el botón en el lugar correcto

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

La barra de navegación en forma de clase se hace sólo para este.

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

Tomado de http://examples.getbootstrap.com/jumbotron/index.html?