Bootsrap页面冲突中的两个响应式导航栏
Bootsrap页面冲突中的两个响应式导航栏
提问于 2013-04-23 07:55:52
使用Bootstrap Responsive Framework，我必须在页面中使用两个导航栏。它们工作得很好，但在切换模式下，单击图标会列出两个"nav-collapce“项！
我试着为第二个类重命名折叠的类名，但是没有起作用。你能告诉我如何才能运行两次“导航-崩溃-崩溃”而不会有任何冲突吗？
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Candete</a>
<div class="nav-collapse collapse">
<!-- .nav, .navbar-search, .navbar-form, etc -->
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">All Products</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Product Category</a>
<div class="nav-collapse collapse">
<!-- .nav, .navbar-search, .navbar-form, etc -->
<ul class="nav">
<li><a href="#">Gold</a></li>
<li><a href="#">Copper</a></li>
<li><a href="#">Zinc</a></li>
<li><a href="#">Metals</a></li>
<li><a href="#">Other</a></li>
</ul>
</div>
</div>
</div>
Stack Overflow用户
发布于 2013-04-23 12:44:57
为nav-collapse元素提供唯一的ID，并以这些ID为目标：
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target="#nav-primary">
...
</a>
<div class="nav-collapse collapse" id="nav-primary">
...
</div>
</div>
</div>
</div>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target="#nav-secondary">
...
</a>
...
<div class="nav-collapse collapse" id="nav-secondary">
...
</div>
</div>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16158664
复制相关文章
相似问题
腾讯云开发者
