导航栏崩溃在Bootstrap上不起作用

Question

I cannot get to work the navbar collapse in Bootstrap 3.

My menu collapse nicely when I change screensize, only it won't show the menu when I press the button.

This is my code:

<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

The issue is not in the HTML your code works perfect in this Fiddle

Check this fiddle

make sure you include the responsive css

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

and the correct JS

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

Answer 2

Your HTML works fine, so make sure you are referencing the proper scripts and and styles in your markup

Make sure you have the following in your markup:

• bootstrap.min.css
• font-awesome.min.css
• jquery.js
• bootstrap.min.js

Fiddle Works Fine

Copy and paste this 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

I also suffered from the same problem, and could not find the solution anywhere. Actually bootstrap.min.js needs jquery to work. SO if you put script src=js/bootstrap.min.js before script src=js/jquery.js it will not work. The Order of inclusion of jquery and bootstrap.min.js is important .