【发布时间】：2018-03-16 04:24:10
【问题描述】：
我一直在学习一些引导程序，并开始使用导航栏，我已经创建了导航栏，当屏幕变小时，我的导航栏会移动到您经常在手机上看到的“三明治”下拉菜单中，除了它单击时不起作用，我不知道为什么，我根本没有收到任何错误！有任何想法吗 ？
<!DOCTYPE html>
<html>
<head>
<title>BootStrap Site</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-
BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
.thumb{padding: 60px 10px; text-align: center; background: #fff;}
.thumb:nth-child(even){background: #fff;}
h1, h2{margin: 30px 0;}
.contatiner-fluid, .container{}
.thumb:nth-child(odd){clear: both;}
</style>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a href="/indx.html" class="navbar-brand">AWESOME TRAINING</a>
<button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">Ninja Training</a></li>
<li class="active"><a href="#">Wizard Training</a></li>
<li><a href="#">Phsycic Training</a></li>
<li><a href="#">Coding Training</a></li>
</ul>
<button class="btn btn-default navbar-btn navbar-right" style="margin-left: 10px;">Register</button>
<button class="btn btn-primary navbar-btn navbar-right">Log In</button>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
</div>
</div>
</nav>
<div class="container" style="padding-top: 60px;">
<div class="row">
<div class="col-xs-12">
<h1>Navbars</h1>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"</script>
<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-
Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script>
$(".nav li").on("click", function(){
$(".nav li").removeClass("active");
$(this).addClass("active");
});
</script>
</body>
</html>【问题讨论】：
-
没什么大不了的，你忘了关闭脚本标签。在下面查看我的答案。
标签： html web twitter-bootstrap-3 navbar