Bootstrap导航栏。 当我按下button什么都没有发生
我的导航栏有问题 当屏幕很小时，出现一个button，但是当我按下button时，什么也没有发生。
这是我的代码，我不知道为什么Navebar中的button不做任何事情。
body { font-family: Verdana; // letter-spacing: 1px; } #header, h1 { // color: #6f6f6f; color: #fff; font-size: 24px; } container { margin-left: auto; margin-right: auto; } #header { margin-top: 50px; margin-left: auto; margin-right: auto; width: 100%; height: 200px; padding-top: 10px; background: rgb(26, 84, 155); background: -moz-linear-gradient(45deg, rgba(26, 84, 155, 1) 0%, rgba(125, 185, 232, 1) 100%); background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, rgba(26, 84, 155, 1)), color-stop(100%, rgba(125, 185, 232, 1))); background: -webkit-linear-gradient(45deg, rgba(26, 84, 155, 1) 0%, rgba(125, 185, 232, 1) 100%); background: -o-linear-gradient(45deg, rgba(26, 84, 155, 1) 0%, rgba(125, 185, 232, 1) 100%); background: -ms-linear-gradient(45deg, rgba(26, 84, 155, 1) 0%, rgba(125, 185, 232, 1) 100%); background: linear-gradient(45deg, rgba(26, 84, 155, 1) 0%, rgba(125, 185, 232, 1) 100%); filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#1a549b', endColorstr='#7db9e8', GradientType=1); } table { float: left; } .beschreibung { width: 100%; float: left; } .text { float: left; } .person { float: left; margin-top: 20px; border-width: 1px; border-style: solid; border-color: #8ec6f7; padding: 2.5em; border-radius: 5px; text-align: justify; } .download { background-color: #8ec6f7; border-radius: 10px; width: 100px; color: #fff; } .footer { margin-top: 140px; width: 100%; height: 200px; background: #909090; float: bottom; } .footer, .foo { color: #fff; } <!DOCTYPE HTML> <html> <head> <title>TestPage</title> <link rel="stylesheet" type="text/css" href="style.css"> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script> <meta charset="utf-8" /> <link rel="icon" type="image/png" href="apple_logo.png" /> </head> <body> <!--nav bar--> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="index.html">Home <span class="sr-only">(current)</span> </a> </li> <li><a href="about_us.html">About us</a> </li> <li><a href="downloads.html">Downloads</a> </li> </ul> </div> </div> <div class="navbar-header"> </div> </nav> <!--header--> <div id="header"> <div class="container"> <center> <h1>Überschrift</h1> <h3>unter überschrift</h3> </center> </div> </div> <!-- body-part --> <div class="container"> <h2>News</h2> <hr/> <div class="line"> <div class="col-xs-6 col-sm-3"> <a href="#" class="thumbnail"> <img src="ip_doesnt_exist.jpg" alt="..."> </a> </div> <h4>Example heading</h4> <p class="text">jalösdjflkajglökadjflögkjaölkdfjölk jaölksjdföl jölkasdjfölka</p> <br/> <br/> <p><b>1.1.1999</b> </p> <br/> <br/> <br/> <hr/> </div> <div class="line"> <div class="col-xs-6 col-sm-3"> <a href="#" class="thumbnail"> <img src="ip_doesnt_exist.jpg" alt="..."> </a> </div> <h4>Example heading</h4> <p class="text">jalösdjflkajglökadjflögkjaölkdfjölk jaölksjdföl jölkasdjfölka</p> <br/> <br/> <p><b>1.1.1999</b> </p> <br/> <br/> <br/> <br/> <hr/> </div> <div class="line"> <div class="col-xs-6 col-sm-3"> <a href="#" class="thumbnail"> <img src="ip_doesnt_exist.jpg" alt="..."> </a> </div> <h4>Example heading</h4> <p class="text">jalösdjflkajglökadjflögkjaölkdfjölk jaölksjdföl jölkasdjfölka</p> <br/> <br/> <p><b>1.1.1999</b> </p> <br/> <br/> <br/> <hr/> </div> </div> <div class="footer"> <div class="container"> <br/> <div class="row"> <div class="col-sm-12 col-md-12"> <a href="#"> <img src="facebook-icon.png" alt="facebook"> <p class="foo">Followe us on Facebook</p> </a> </div> <div class="col-sm-12 col-md-12"> <a href="#"> <img src="google-plus-icon.png" alt="google+"> <p class="foo">Followe us on Google +</p> </a> </div> <div class="col-sm-12 col-md-12"> </div> </div> </div> </div> </body> </html>
缺less的是对jquery.js的引用。 我创build了jsfiddle来演示它。
请注意，在引用bootstrap.js 之前 ，需要引用jquery.js
你的html head应该是这样的：
<!-- Latest compiled and minified JavaScript --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script>
希望这个作品
你有没有包含所有必要的JavaScript？ 检查是否包含bootstrap的JavaScript文件，或者您可以下载Bootstrap的collapse.js
