2014-04-22 117 views
1

我正在使用以下標記來創建可摺疊的導航欄,但它不起作用。Bootstrap 3.1.1 navbar不會崩潰?

當屏幕大小縮小導航欄項目時,簡單地消失而不是摺疊成一個按鈕。

<div class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <a class="navbar-brand" href="#">My Project</a> 
      </div> 
      <div class="collapse navbar-collapse"> 
       <ul class="nav navbar-nav pull-right"> 
        <li class="active"><a href="./">Logout</a></li> 
        <li class="active"><a href="./">New Post</a></li> 
       </ul> 
      </div> 
    </div> 
    </div> 


我的JS小提琴:link

回答

1

它的工作原理,但你需要一個切換按鈕..

<div class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container"> 
      <div class="navbar-header"> 
      <a class="navbar-brand" href="#">My Project</a> 
      <a 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> 
      </a> 
      </div> 
      <div class="collapse navbar-collapse"> 
      <ul class="nav navbar-nav pull-right"> 
       <li class="active"><a href="./">Logout</a></li> 
       <li class="active"><a href="./">New Post</a></li> 
      </ul> 
      </div> 
     </div> 
    </div> 

http://bootply.com/131875