Bootstrap导航栏切换按钮无法正常工作

时间:2016-03-05 21:33:55

标签: html css twitter-bootstrap

当页面缩小为平板电脑/手机尺寸时,会显示切换按钮但不起作用。这是html

<nav class="navbar navbar-inverse navbar-fixed-top">

		<div class="container">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav-demo" 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 href="#" class="navbar-brand"><span class="glyphicon glyphicon-picture" aria-hidden="true"></span> IMGS</a>
			</div>
			<div class="collapse navbar-collapse" id="bs-nav-demo">
				<ul class="nav navbar-nav">
					<li><a href="#">About</a></li>
					<li><a href="#">Contact</a></li>
				</ul>
				<ul class="nav navbar-nav navbar-right">
					<li><a href="#">Sign Up</a></li>
					<li><a href="#">Login</a></li>
				</ul>
			</div>
		</div>

	</nav>

....
....


	<script type="text/javascript" href="https://code.jquery.com/jquery-2.2.1.js"></script>
	<script type="text/javascript" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

它确实包含了所需的js链接。

1 个答案:

答案 0 :(得分:1)

所以我发现了这个问题;它非常轻微。 href属性应替换为脚本标记上的src属性。 Sublime Text的选项卡按下脚本默认为href。

&#13;
&#13;
	<script src="https://code.jquery.com/jquery-2.2.1.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
&#13;
&#13;
&#13;