知道为什么我的导航栏不会折叠成一个小 window 吗？

Question

我创建了一个导航栏，并按照我的方式设置了样式。但是，当我将 window 变小并单击按钮的右上角时，导航栏会扩展所有选项，仅此而已。一旦我点击其中一个选项，它就不会关闭，即它不会向后折叠。我究竟做错了什么？我已经对此进行了一段时间的探索，但看不出错误。

这是我的代码：

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">      
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <!-- use a responsive image option so this logo looks good on devices - recommend using something like retina.js -->
        <a class="navbar-brand" href="#/">Test</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-ex1-collapse">
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#/home">Home</a>
            </li>
            <li><a href="#/about">About Us</a>
            </li>
            <li><a href="#/services">What We Do</a>
            </li>
            <li><a href="#/example">Examples</a>
            </li>
            <li><a href="#/testimonials">Testimonials</a>
            </li>
            <li><a href="#/contact">Contact Us</a>
            </li>  
        </ul>
    </div>
  </div>
</nav>

在我的 index.html 中，我 link 到 header.html 效果很好，还有以下样式：

  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

和 javascript:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

Answer 1

单击链接不会自动 collapse/toggle Bootstrap 导航栏。这是设计使然。

如果您希望它们在点击后关闭，您可以将其添加到链接中..

data-toggle="collapse" data-target=".navbar-collapse.in"

演示：http://www.codeply.com/go/Ia4LLB8Yyp

您也可以像这样使用 jQuery..

$(document).on('click','.navbar-collapse.in',function(e) {
    if( $(e.target).is('a') ) {
        $(this).collapse('hide');
    }
});

知道为什么我的导航栏不会折叠成一个小 window 吗？

Any idea why my nav bar will not collapse in a small window?

html

navbar

twitter-bootstrap