Bootstrap 3 导航栏不折叠答案

【问题标题】：Bootstrap 3 Navbar does not collapseBootstrap 3 导航栏不折叠
【发布时间】：2013-11-25 02:57:03
【问题描述】：

我知道我缺少一些简单的东西，但是当我缩小屏幕时，导航栏折叠切换不起作用。我已经搜索过 SO，但找不到可以解决我的问题的解决方案。

有人可以帮我弄清楚我在下面的代码中缺少什么吗？

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="Content-Style-Type" content="text/css">
  <title></title>
  <link rel="stylesheet" href="css/bootstrap.min.css" />
  <link rel="stylesheet" href="css/slate-bootstrap.min.css" />
  <link rel="stylesheet" href="css/larry.css" />
</head>
<body>
<div id="page">
  <header class="container">
    <div id="menu" class="navbar navbar-default">
        <div class="navbar-header">
            <button class="btn btn-success navbar-toggle" 
                    data-toggle="collapse" 
                    data-target=".navbar-collapse"><span class="glyphicon glyphicon-chevron-down"></span>
            </button>
            <div id="logo">
                <h4><a href='./index.html'><img src="images/LE-logo.png"></a></h4>
            </div>
        </div>

        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li class="nav active"><a href="./index.html">Home</a></li>
                <li class="nav"><a href="./resume.html">Resume</a></li>
                <li class="nav"><a href="./contact.html">Contact</a></li>
                <li class="nav"><a href="./about.html">About</a></li>
            </ul>
        </div>
    </div>
  </header>

  <section id="body" class="container">
    <section id="main" class="col-md-9">
        <p> Ipsome loreme, blah , blah</p>

    </section>
  </section>


  <hr />
  <footer class="container">
    <p>Placeholder for footer</p>
  </footer>
</div>

<script scr="js/jquery-2.0.3.min.js"></script>
<script scr="js/bootstrap.min.js"></script>

</body>
</html>

【问题讨论】：

glyphicon 出现了，但它仍然没有切换导航栏折叠 div。
你所拥有的已经很好了jsfiddle.net/NkED8
谢谢@rwisch45。一定是浏览器问题，或者 jquery 由于某种原因没有加载。感谢您指出了这一点。我会继续努力的。
我在 JSBin 中试过这个，但还是不行：jsbin.com/ACedUras/1/edit?html,output 抱歉，我对 JS 和 Bootstrap 还是很陌生。
@rwisch45 我找到了答案，但如果你发布答案，我会给你分数，因为你的评论让我开始朝着正确的方向前进。谢谢

标签： jquery html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

好像没问题。如果 navbar-collapse 元素从未显示，请检查您是否为它添加了任何样式，您是如何隐藏它的？

【讨论】：

据我了解，这是 Bootstrap 框架的一部分。您只需将特定的类名添加到 div，然后连接 data-toggle 和 data-target，它应该会为您处理。

【解决方案2】：

在 Firebug（绝对是最好的浏览器调试工具）中调试后，我发现它没有正确加载 bootstrap.js。我不确定为什么它没有从我的目录中提取它，但我更改为 CDN，并且我必须在前面加上“http://”。

【讨论】：