Bootstrap导航栏不崩溃（防止）

Question

我想使用bootstrap导航到我自己的需要，但已经偶然发现了一个问题。

当窗口缩小时，我希望左侧的前两个链接（home和菜单图形）不会折叠。其余的将崩溃。

截图链接 enter link description here

这里是我的代码

<template name="header"> 
    <nav class="navbar navbar-default" role="navigation"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navigation"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 

     <ul class="nav navbar-nav"> 
      <li><a class="navbar-nav" href="{{pathFor 'home'}}"><span class="glyphicon glyphicon-home"></span></a></li> 
      <li><a class="navbar-nav" id="showMenu" href="#"><span class="glyphicon glyphicon-align-left"></span></a></li> 
     </ul> 
     </div> 




     <div class="collapse navbar-collapse" id="navigation"> 
     <ul class="nav navbar-nav"> 
      <li class="{{activeRouteClass 'home' 'newPosts'}}"> 
      <a href="{{pathFor 'newPosts'}}">New</a> 
      </li> 
      <li class="{{activeRouteClass 'bestPosts'}}"> 
      <a href="{{pathFor 'bestPosts'}}">Best</a> 
      </li> 

      {{#if currentUser}} 
      <li class="{{activeRouteClass 'postSubmit'}}"> 
       <a href="{{pathFor 'postSubmit'}}">Submit Post</a> 
      </li> 
      <li class="dropdown"> 
       {{> notifications}} 
      </li> 
      {{/if}} 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     {{> loginButtons}} 
     </ul> 
     </div> 
    </div> 
    </nav> 
</template> 

Answer 1

将它们放入一个单独的<ul>对象没有nav navbar-nav类，以禁用此行为。