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類，以禁用此行爲。