Twitter bootstrap 引导下拉子菜单在tablet/phone视图中显示不正确

我确实搜索了许多引导下拉式问题，但没有看到任何与我相同的具体问题

我对Bootstap下拉菜单Navbar子菜单的

我使用的是最新版本的Bootstrap（v2.0.3）

现在，在标准桌面视图中，一切似乎都正常工作——但当我缩小浏览器宽度（或iPhone/iPad上的视图）时，子菜单无法正常工作

最好你去我的测试点看看

如您所见，“Points Tables”下拉列表在桌面视图中很好，但在“mobile”视图中出现了一些问题。“弹出”不起作用，子菜单永久显示

我相信我已经完全遵循了示例代码（除了通过“升级文档”了解到需要以与示例显示方式不同的新方式实现“插入符号”）

这是我目前的代码：

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <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>
      <a class="brand" href="#"><img alt="F1Stockcars.com" src="../assets/img/logo.png"></a>
      <div class="nav-collapse">
        <ul class="nav">

          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            Points Tables
            <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
            <li><a href="#">National Points</a></li>
            <li><a href="#">World Championship Qualifying</a></li>
            <li><a href="#">Track Championships</a></li>
            </ul>
          </li>
          <li><a href="#">Meeting Results</a></li>
          <li><a href="#">Drivers</a></li>
          <li><a href="#">Final Winners</a></li>
          <li><a href="#">Top Scorers by Meeting</a></li>
          <li><a href="#">Highest Scores</a></li>
          <li><a href="#">Back to F1Stockcars.com</a></li>
        </ul>
      </div><!--/.nav-collapse -->
    </div>
  </div>
</div>

我不知道我做错了什么，这个页面是作为他们的一个示例页面开始的，所以应该有所有必要的代码，我已经将整个引导框架添加到了我的服务器上，甚至包括我实际上不需要的Javascript

任何帮助都将不胜感激，因为我对此完全感到困惑

我只有非常基本的技能，所以请保持简单

---

非常感谢-Ade

难道你没有忘记包含bootstart-collapse.js吗

如果您添加它，它应该可以工作。

尝试更改：

<div class="nav-collapse">

致：

这为我解决了问题。我在bootstrap站点的示例中找到了它：（向下滚动到响应导航栏部分）

<div class="nav-collapse collapse">