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>