如何获取可折叠导航栏的工作方式？

Question

我使用twitter bootstrap，当我将浏览器窗口的宽度减小到一定大小时，我看到下面的图像。但是，当我点击它并没有任何反应时。我通常有2个元素，但当宽度太小时看不到它们。如何通过从显示中删除按钮或者显示按钮来解决这个问题，然后在点击时显示2个项目？

Answer 1

从显示停止按钮，您可以在下面的代码添加到你的CSS：

.navbar .btn-navbar{ 
    display:none; 
    } 

此外，您了解更多信息可go through this article和帮助..

Answer 2

确保你有自适应引导CSS和崩溃JavaScript插件每引导文档：

抬头！响应式导航栏需要折叠插件和 响应式Bootstrap CSS文件。

而且，这里是它的工作的一个例子（已经引导响应CSS和JS引导参考）： http://jsfiddle.net/ZdVcg/

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" rel="stylesheet"> 
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script> 
<div class="navbar"> 
<div class="navbar-inner"> 
<div class="container"> 

    <!-- .btn-navbar is used as the toggle for collapsed navbar content --> 
    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    </a> 

    <!-- Be sure to leave the brand out there if you want it shown --> 
    <a class="brand" href="#">Project name</a> 

    <!-- Everything you want hidden at 940px or less, place within here --> 
    <div class="nav-collapse collapse"> 
    <!-- .nav, .navbar-search, .navbar-form, etc --> 
     <ul class="nav"> 
      <li class="active"><a href="#">Home</a> 
      </li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
     </ul> 

    </div> 

</div> 
</div> 
</div>​