2014-11-24 59 views
1

我想使用bootstrap導航到我自己的需要,但已經偶然發現了一個問題。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> 

回答

0

將它們放入一個單獨的<ul>對象沒有nav navbar-nav類,以禁用此行爲。

+0

感謝您的快速響應。唯一的問題是,在這個解決方案中,兩個圖標不會彼此相鄰,而是分開排列。這是一個截圖。 http://imgur.com/X2ExRmc – 2014-11-24 00:31:24

+0

如果你在http://jsfiddle.net上設置了一個例子,它將更容易調試。 – 2014-11-24 00:34:55

+0

http://jsfiddle.net/uphvudhe/ 這裏你去 – 2014-11-24 00:41:02