我知道这对人们来说似乎是一个普遍的问题,而且我已经尽可能多地阅读了这个问题,但我错过了一些东西。我按照引导网站上的示例作为模板,网站响应并调整大小。当它到达显示切换按钮的点时,我点击并没有任何反应。这是在母版页上
主管HTML:
<head runat="server"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<link href="../Content/bootstrap.css" rel="stylesheet" />
<link href="../Content/Interior.css" rel="stylesheet" /> <!-- custom style sheet -->
<link href="../Content/normalize.css" rel="stylesheet" />
</head>
HTML:
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="navbar-collapse">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Site Name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">Dash</a></li>
<li><a href="#">Edit Profile</a></li>
<li><a href="#">Invite</a></li>
<li><a href="#">Record A Message</a></li>
<li>
<p class="navbar-text">Connections <span class="badge">0</span></p>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<p class="navbar-text">Sign out as <a class="navbar-link" href="Login.aspx">User</a></p>
</li>
</ul>
</div>
</nav>
...
<script src="../Scripts/jquery-2.0.3.min.js"></script>
<script src="../Scripts/bootstrap.js"></script>
</body>
</html>
我对此事有任何想法。
答案 0 :(得分:2)
您只需要在此行添加句点:
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
(最后把它们放在一起弄明白:http://jsfiddle.net/VDcnr/)
虽然我建议在那里放置一个自定义类用于奇怪的角落情况,你最终在同一页面上有两个导航栏。
另外,作为旁注,我很确定normalize.css包含在bootstrap中,因此您不需要再次包含它。