简体   繁体   中英

Bootstrap 3 Navbar does not collapse

I know there is something simple I am missing, but when I shrink my screen, the navbar collapse toggle does not work. I've already search SO and I cannot find a solution that fixes my issues.

Can someone help me figure out what I am missing in the code below?

<!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>

It seems ok. If the navbar-collapse element never shown, check did you add any style for it, how did you hide it?

After debugging in Firebug (definitely the best browser debug tool out there), I found it was not loading bootstrap.js correctly. I'm not sure why it wasn't picking it up from my directory, but I changed to the CDN and I had to have the "http://" in front.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM