Twitter-Bootstrap：導航欄中的登錄表單

Question

我想在twitter導航欄中放置登錄內聯表單。

我已經這樣做了，但我不管理，推動形式吧... http://jsfiddle.net/v34Sv/

所有Twitter的部件（跨度，偏移，右拉）失敗，我擔心失去了響應部件時使用絕對位置。

Answer 1

該按鈕不在完美的位置，但至少該表單是內聯的（我希望它有幫助）。

<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

形式內嵌按鈕，在正確的地方

<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

類導航欄，形式只是本作。

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

摘要：http://examples.getbootstrap.com/jumbotron/index.html？