导航栏切换未出现
navbar toggle not appearing
当我调整浏览器(IE 和 Chrome)大小时,导航会正确消失,但不会出现切换。我遵循了 bootstrap 网站上的代码,但我不确定我遗漏了什么。先感谢您。
这是我的代码片段:
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu-collapse">
<span class="glyphicon glyphicon-menu-hamburger"></span>
<span class="glyphicon glyphicon-menu-hamburger"></span>
<span class="glyphicon glyphicon-menu-hamburger"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="menu-collapse">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
您的代码看起来很棒,如果删除折叠的 class 并将数据目标 属性 菜单折叠 ID 更改为 class,我唯一会做的不同的事情。我在这里重建了导航:
[http://www.bootply.com/xcsJFk9jpA][1]
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="site-template.html">Site Brand</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="clients.html">Clients</a></li>
<li><a href=" contact.html">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Social <b class="caret"></b></a><!--This link dose not go anywhere it is like the intro to the dropdown list.It is used to power the drop down menu. There are going to be social links in the drop down. -->
<ul class="dropdown-menu">
<li><a href="http://facebook.com">Facebook</a></li>
<li><a href="http://twitter.com">Twitter</a></li>
<li><a href="http://plus.google.com">Google</a></li>
<li><a href="http://www.linkedin.com">LinkedIn</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<!-- End Navigation -->
当我调整浏览器(IE 和 Chrome)大小时,导航会正确消失,但不会出现切换。我遵循了 bootstrap 网站上的代码,但我不确定我遗漏了什么。先感谢您。 这是我的代码片段:
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu-collapse">
<span class="glyphicon glyphicon-menu-hamburger"></span>
<span class="glyphicon glyphicon-menu-hamburger"></span>
<span class="glyphicon glyphicon-menu-hamburger"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="menu-collapse">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
您的代码看起来很棒,如果删除折叠的 class 并将数据目标 属性 菜单折叠 ID 更改为 class,我唯一会做的不同的事情。我在这里重建了导航:
[http://www.bootply.com/xcsJFk9jpA][1]
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="site-template.html">Site Brand</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="clients.html">Clients</a></li>
<li><a href=" contact.html">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Social <b class="caret"></b></a><!--This link dose not go anywhere it is like the intro to the dropdown list.It is used to power the drop down menu. There are going to be social links in the drop down. -->
<ul class="dropdown-menu">
<li><a href="http://facebook.com">Facebook</a></li>
<li><a href="http://twitter.com">Twitter</a></li>
<li><a href="http://plus.google.com">Google</a></li>
<li><a href="http://www.linkedin.com">LinkedIn</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<!-- End Navigation -->