这是我正在使用的代码:
<div class="navbar-wrapper">
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-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="index.html">Project name</a>
</div>
<div class="collapse navbar-collapse" id="#nav-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="work.html">Work</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#modal-contact-form" data-toggle="modal" data-target="#modal-contact-form">Contact</a></li>
</ul>
</div><!--/.navbar-collapse -->
</div>
</div>
</div>
问题是我无法点击3个图标栏!有什么解决方案吗?
我尝试了不同的导航条解决方案,我甚至从bootstrap github安装了一个,但没有成功!
提前感谢!
上的ID
<div class="collapse navbar-collapse" id="#nav-collapse">
应该是:
<div class="collapse navbar-collapse" id="nav-collapse">
演示
您的代码失败,因为您在id
属性中放入了#
字符;仅在CCD_ 3属性中需要它。
这是您的菜单,已在Firefox、Chrome和MSIE:中修复并确认
<nav class="navbar-wrapper navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-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="index.html">Project name</a>
</div>
<div class="collapse navbar-collapse" id="nav-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="work.html">Work</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#modal-contact-form" data-toggle="modal" data-target="#modal-contact-form">Contact</a></li>
</ul>
</div>
</div>
</nav>