Fiddle Works Fine

Question

我无法使用Bootstrap 3中的导航栏崩溃。

当我更改屏幕大小时，我的菜单很好地折叠，只有当我按下按钮时它才会显示菜单。

这是我的代码：

<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">
          <a href='..'><h3>Logo</h3></a>
        </div>
     </div>
      <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
              <li class="nav active"><a href=".">Home</a>
              </li>
              <li class="nav"><a href="about.html">About</a>
              </li>
              <li class="nav"><a href="contact.html">Contact</a>
              </li>
          </ul>
      </div>
  </div>
</header>

Answer 1

问题不在HTML中，您的代码在此小提琴中完美无缺

选中此fiddle

确保包含响应式CSS

http://getbootstrap.com/dist/css/bootstrap.css

和正确的JS

http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js

Answer 2

您的HTML工作正常，因此请确保在标记中引用正确的脚本和样式

确保您的标记中包含以下内容：

Fiddle Works Fine

复制并粘贴此HTML：

<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<script type="text/javascript" src="//code.jquery.com/jquery-2.0.2.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

Answer 3

我也遇到了同样的问题，无法在任何地方找到解决方案。实际上bootstrap.min.js需要jquery才能工作。因此，如果你在脚本src = js / jquery.js之前放入脚本src = js / bootstrap.min.js它将无效。 jquery和bootstrap.min.js的包含顺序很重要。

Navbar崩溃无法在Bootstrap上运行

3 个答案:

Fiddle Works Fine