更新:为了避免混淆,我分叉了Plunker,并删除了另一个下拉菜单。为了澄清下拉菜单,我遇到问题的是当你调整屏幕大小时有3个条形的菜单。
我遇到了带有angularjs脚本的引导下拉菜单按钮,以及所有其他脚本和按正确顺序放置的链接的问题。这是我的Plunker
我一直在研究这个问题,到目前为止,我已经尝试了所有这些问题 StackOverflow上的解决方案,例如:
按正确顺序排列脚本和链接:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.2/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.0-rc.2/angular-animate.min.js"></script>
<script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"crossorigin="anonymous">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
使用JS强制下拉切换:
$(document).ready(function() {
$(".dropdown-toggle").dropdown();
});
到目前为止,我仍无法将下拉列表设为 HTML :
<!--Navigation Bar Relative -->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!--Logo!-->
<div class="navbar-header">
<a href="#" class="navbar-brand">THE LOGO</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="mainNavBar">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
</div>
<!--Menu Items!-->
<div class="collapse navbar-collapse" id="mainNavBar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Download</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Timeline</a></li>
<li><a href="#">Contact</a></li>
</ul>
<!--Right-Align Menu Items!-->
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Logout</a></li>
</ul>
</div>
</div>
</nav>
<div ng-controller="">
</div>
我是Bootstrap和AngularJS的新手,所以请解释一下我做错了什么,并帮助我朝着正确的方向前进。谢谢!
答案 0 :(得分:0)
您已经错过了数据目标
中的#
个ID
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">