Bootstrap 3 Navbar永久搜索框

Question

我發現了一個非常接近我想要獲得的例子，從this website。

的源代碼（所要求的SO）：

<div class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container"> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand hidden-xs" href="#">CompAny</a> 
     <a class="navbar-brand visible-xs" href="#">C</a> 
     <form class="navbar-form pull-left" role="search"> 
      <div class="input-group"> 
       <input type="text" class="form-control" placeholder="Search"> 
       <div class="input-group-btn"> 
        <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button> 
       </div> 
      </div> 
     </form> 
     </div> 
     <div class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav navbar-right"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#about">Browse Courses</a></li> 
      <li><a href="#contact">Active Courses</a></li> 
     </ul> 
     </div> 
     <!--/.navbar-collapse --> 
    </div> 
</div> 

相關撥弄here。

但在我的情況下，我更喜歡的搜索欄是右對齊，如本樣機我一個圖像編輯器製作：

對於一個小屏幕：

對於一個更大的屏幕：

Answer 1

好吧，我 「種」 了它。您的導航欄頭類使用了左拉。它只使用它需要的空間。所以如果你的所有內容都是整行的大小，那麼你就不會注意到，但是如果你的內容只佔用了一半的大小，那麼你就會看到你擁有的問題。

所以，我只是「關閉」導航欄標題div，並開始一個新的div，現在你的搜索欄向右。您可以使用此bootply拿到你的東西，其餘早在那裏玩......

http://www.bootply.com/WIjcWyD0Gt

這裏的更新版本，與正常的菜單項回。如果您希望這些對你的菜單的右側，然後將它們扔到我爲搜索表單創建的新div上。

http://www.bootply.com/P7njftNANB

這裏是萬一bootply的代碼是不可用：

<div class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container"> 
    <div class="row"> 
     <div class="navbar-header"> 
     <div class="pull-right"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     </div> 
     <div class="pull-left"> 
     <a class="navbar-brand hidden-xs" href="#">CompAny</a> 
     <a class="navbar-brand visible-xs" href="#">C</a> 
     </div> 
     <div class="navbar-collapse collapse pull-right"> 
     <ul class="nav navbar-nav navbar-right"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#about">Browse Courses</a></li> 
      <li><a href="#contact">Active Courses</a></li> 
     </ul> 
     </div> 
     </div> 
     <div> 
     <div class="pull-right"> 
     <form class="navbar-form pull-right" role="search"> 
      <div class="input-group"> 
       <input type="text" class="form-control" placeholder="Search"> 
       <div class="input-group-btn"> 
        <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button> 
       </div> 
      </div> 
     </form> 
     </div> 
     </div> 
    </div> 
     <!--/.navbar-collapse --> 
    </div> 
</div>