Jquery 带永久搜索框的Bootstrap 3导航栏

我发现了一个非常接近我想从中得到的例子

源代码（根据SO要求）：

相关小提琴

但在我的例子中，我更希望搜索栏向右对齐，就像我用图像编辑器制作的模型一样：

对于小屏幕：

对于更大的屏幕：

好吧，我“有点”明白了。你的导航栏标题类使用了左拉。它只是利用了它所需要的空间。因此，如果你的内容都是整行的大小，那么你不会注意到，但是如果你的内容只占了一半大小，那么你就看到了问题所在

所以，我刚刚“关闭”了导航栏标题div，并开始了一个新的div，现在您的搜索栏转到右侧。你可以用这只靴子把剩下的东西放回去

这是你的常规菜单项的更新版本。如果你想把它们放在菜单的右边，那么把它们放到我为搜索表单创建的新div中

以下是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>

您应该能够使用引导“向右拉”类，但我在您的小提琴上试过了，它看起来不像引导加载在那里……看起来您的导航栏折叠div正在将其丢弃。当我把它拿出来的时候，它会像你想的那样向右拉。如果有时间的话，我会试着多玩玩……看起来你和我碰到了同样的碰撞：当“崩溃”时，搜索栏会跳转到另一行。在Firefox上它向右对齐，在Chrome（设备模拟）上它占据所有可用宽度。我宁愿把导航栏中的搜索栏作为一行。经过一个小时的摆弄，我找到了一个我喜欢的解决方案。谢谢你非常宝贵的帮助！请在回答中包含引导链接中的相关代码。如果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>