Bootstrap Collapsible Navbar不会崩溃

时间:2014-11-26 00:23:52

标签: javascript html twitter-bootstrap

我是新手使用框架,我正在使用bootstrap进行类项目,并试图让我的导航栏在我折叠时创建按钮但是当浏览器崩溃时没有创建按钮,任何想法?

<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaJam Coffee House</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../dist/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="javajam.css" type="text/css">

</head>`
<body>
<div id="wrapper">
    <div id="nav">
    <div id="navbar navbar-default navbar-static-top" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">JavaJam</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="index.html">Home</a></li>
                    <li><a href="menu.html">Menu</a></li>
                    <li><a href="music.html">Music</a></li>
                    <li><a href="jobs.html">Jobs</a></li>
                </ul>
            </div>
        </div>    
    </div>
    </div>
    <div id="content">


    <ul>
      <li>Specialty Coffee and Tea</li>
      <li>Bagels, Muffins, and Organic Snacks</li>
      <li>Music and Poetry Readings</li>
      <li>Open Mic Night</li>
    </ul>


    </div>
    <div id="footer"> JavaJam Coffee House • 12312 Main Street Mountain Home, CA 93923 • 1-888-555-5555 • Copyright © 2014<br>
    <a href="mailto:alexsbarrington@gmail.com">alexsbarrington@gmail.com</a></div>
</div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="../../dist/js/bootstrap.min.js"></script>

</body>
</html>

1 个答案:

答案 0 :(得分:0)

将ID更改为Class,它将起作用。一般规则每个元素只有1个ID。