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。

但在我的情况下，我更喜欢搜索栏与右侧对齐，就像我使用图像编辑器制作的这个模型一样：

对于小屏幕：

small screen

对于更大的屏幕：

large sceen

Answer 1

好吧，我“有点”想通了。你的navbar-header类正在使用左拉。它只使用它所需的空间。因此，如果您的所有内容都是整行的大小，那么您就不会注意到，但如果您的内容只占用了一半，那么您就会看到问题所在。

所以，我只是“关闭”了navbar-header 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>

带有永久搜索框的Bootstrap 3 Navbar

1 个答案: