Bootstrap导航栏折叠按钮不起作用
我知道这已被问及数千次,我一直在寻找一些类似的问题约一个小时。Bootstrap导航栏折叠按钮不起作用
我无法弄清楚我的代码中存在什么问题,无论我尝试使用哪种解决方案都无效。
这里是我的项目中navbar
段(从引导文档导出):
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale = 1">
<title>{{ title }}</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target"#rtNavbar" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">TestApp01</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-collapse" id="rtNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search" aria-hidden="true" /></button>
</form>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- Some more stuff here -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
我使用引导3对特快的node.js应用程序。如果重要的话,我正在使用hogan模板。
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale = 1">
<title>{{ title }}</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">TestApp01</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-collapse" id="rtNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search" aria-hidden="true" /></button>
</form>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- Some more stuff here -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
只是让这种变化的数据目标。 https://gist.github.com/anonymous/916bb0286c966660121fecbafdd9140a
它是因为Bootstrap与jQuery 3不兼容。使用jQuery 2,或者在jQuery之后嵌入jQuery Migrate。
我已经切换到jQuery 2.2.4 CDN但它仍然不工作:/ –
变化如果不因为自举3的多数民众赞成在不使用jQuery 3.0和此刻的兼容上述数据针对其错误尝试这样
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#rtNavbar" aria-expanded="false">
。所以可以与Bootstrap 3一起使用的最新版本的jQuery是2.2.4。
请看上面的答案:) –
问题的一部分可能是JS和jQuery嵌入代码的方式(以及位置)。我注意到 - 至少对于JS来说 - 没有关闭</script>
标签。我认为你的问题可能很简单,因为没有把这些标签放在正确的位置,也没有正确关闭。
我在<head>
中使用了以下<script>
新增功能,并使折叠按钮有效,因此您可能需要在<head>
内尝试这些。它甚至可以像在Bootstrap CSS链接下面不包括这两个脚本一样简单。它应该是这个样子(自举3):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
你也在你<button>
标签了与data-target
一个问题。请尝试使用类似data-target""#myNavbar"
的内容。
另一件事是你有一个多余的navbar-collapse
第二个<div>
属于您的酒吧右对齐的元素。这可能会弄脏水域并导致问题。否则,其余的代码材料看起来不错。只需尝试在<head>
中声明上述代码即可。祝你好运!
jQuery甚至可以使用Node.js吗?如果你只是为导航栏使用jQuery和Bootstrap的js文件,我建议看看[Bootstrap Without jQuery](https://github.com/tagawa/bootstrap-without-jquery)。它更轻量化。 –