菜单不崩溃

我想为移动屏幕做一个可折叠的导航栏。它会崩溃并显示图标栏跨度标签;但是，当我点击它时，它不会做任何事情。菜单不崩溃

这里是我的HTML：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
<link rel="stylesheet" type="text/css" href="CSS/main.css"> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
    <title>Home Page</title> 
</head> 
<body> 
<nav class="navbar navbar-default navbar-static-top"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
      <a class="navbar-brand" style="margin-top: -15px; float: left;" href="#"> 
      <img alt="Brand" class="pull-left col-xs-0" style="margin-left: -15px;" src="Images/TrueInternet.png"> 
      </a> 
     <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> 
     <span class="icon-bar"></span> 
     </button> 
     </div> 
     <div class="collapse navbar-collapse navHeaderCollapse"> 
      <ul class="nav navbar-nav"> 
       <li><a href="#">Home</a></li> 
       <li><a href="#">Internet</a></li> 
       <li><a href="#">Phone</a></li> 
       <li><a href="#">Android TV</a></li> 
       <li><a href="#">Shaw Direct</a></li> 
       <li><a href="#">Contact Us</a></li> 
      </ul> 
    </div> 
    </div> 
</nav><div class="container"> 
    <div class="row"> 
     <div class="col-xs-12 col-md-1">Test. Test. Test. Test. Test. Test. Test. Test.</div> 
     <div class="col-xs-12 col-md-1">Test. Test. Test. Test. Test. Test. Test. Test.</div> 
     <div class="col-xs-12 col-md-1">Test. Test. Test. Test. Test. Test. Test. Test.</div> 
     <div class="col-xs-12 col-md-1">Test. Test. Test. Test. Test. Test. Test. Test.</div> 
     <div class="col-xs-12 col-md-1">Test. Test. Test. Test. Test. Test. Test. Test.</div> 
     <div class="col-xs-12 col-md-1">Test. Test. Test. Test. Test. Test. Test. Test.</div> 
     <div class="col-xs-12 col-md-1">Test. Test. Test. Test. Test. Test. Test. Test.</div> 
     <div class="col-xs-12 col-md-1">Test. Test. Test. Test. Test. Test. Test. Test.</div> 
     <div class="col-xs-12 col-md-1">Test. Test. Test. Test. Test. Test. Test. Test.</div> 
     <div class="col-xs-12 col-md-1">Test. Test. Test. Test. Test. Test. Test. Test.</div> 
     <div class="col-xs-12 col-md-1">Test. Test. Test. Test. Test. Test. Test. Test.</div> 
     <div class="col-xs-12 col-md-1">Test. Test. Test. Test. Test. Test. Test. Test.</div> 
    </div> 
</div> 

</body> 
</html>

我刚才似乎无法推测出来。

来源

2016-12-28 Thomas Hutton

[这]（HTTP ：//getbootstrap.com/getting-started/）应该有所帮助。注意所有需要的资源。你需要'bootstrap.css'，'jquery.js'和'bootstrap.js'。您可能还需要通常在'bootstrap.css'后面加载的'font-awesome.css'。您可能会加载缩小版本，但“js”文件的顺序需要保持不变。 –

你缺少的meta标签：

<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

尤其是视IST至关重要的引导才能正常工作。

另外你还没有实现jQuery。添加以下你的身体标记的底部：

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<!-- Include all compiled plugins (below), or include individual files as needed --> 
<script src="js/bootstrap.min.js"></script>

这应该是你的代码中添加元和脚本标记后：

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
    <link rel="stylesheet" type="text/css" href="CSS/main.css"> 
 
    <title>Home Page</title> 
 
</head> 
 
<body> 
 
<nav class="navbar navbar-default navbar-static-top"> 
 
    <div class="container-fluid"> 
 
     <div class="navbar-header"> 
 
      <a class="navbar-brand" style="margin-top: -15px; float: left;" href="#"> 
 
      <img alt="Brand" class="pull-left col-xs-0" style="margin-left: -15px;" src="Images/TrueInternet.png"> 
 
      </a> 
 
     <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     </div> 
 
     <div class="collapse navbar-collapse navHeaderCollapse"> 
 
      <ul class="nav navbar-nav"> 
 
       <li><a href="#">Home</a></li> 
 
       <li><a href="#">Internet</a></li> 
 
       <li><a href="#">Phone</a></li> 
 
       <li><a href="#">Android TV</a></li> 
 
       <li><a href="#">Shaw Direct</a></li> 
 
       <li><a href="#">Contact Us</a></li> 
 
      </ul> 
 
    </div> 
 
    </div> 
 
</nav><div class="container"> 
 
    <div class="row"> 
 
     <div class="col-xs-12 col-md-1">Test. Test. Test. Test. Test. Test. Test. Test.</div> 
 
     <div class="col-xs-12 col-md-1">Test. Test. Test. Test. Test. Test. Test. Test.</div> 
 
     <div class="col-xs-12 col-md-1">Test. Test. Test. Test. Test. Test. Test. Test.</div> 
 
     <div class="col-xs-12 col-md-1">Test. Test. Test. Test. Test. Test. Test. Test.</div> 
 
     <div class="col-xs-12 col-md-1">Test. Test. Test. Test. Test. Test. Test. Test.</div> 
 
     <div class="col-xs-12 col-md-1">Test. Test. Test. Test. Test. Test. Test. Test.</div> 
 
     <div class="col-xs-12 col-md-1">Test. Test. Test. Test. Test. Test. Test. Test.</div> 
 
     <div class="col-xs-12 col-md-1">Test. Test. Test. Test. Test. Test. Test. Test.</div> 
 
     <div class="col-xs-12 col-md-1">Test. Test. Test. Test. Test. Test. Test. Test.</div> 
 
     <div class="col-xs-12 col-md-1">Test. Test. Test. Test. Test. Test. Test. Test.</div> 
 
     <div class="col-xs-12 col-md-1">Test. Test. Test. Test. Test. Test. Test. Test.</div> 
 
     <div class="col-xs-12 col-md-1">Test. Test. Test. Test. Test. Test. Test. Test.</div> 
 
    </div> 
 
</div> 
 
    
 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
</body> 
 
</html>

来源

2016-12-28 20:36:51 kkreft

谢谢，这个修好了！我还有一些问题，但我会在稍后处理。 –

回答

相关问题