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>
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-04-23 09:28:35
在Twitter Bootstrap中，.nav-collapse是一个重要的类，所以不要改变它。最佳解决方案是什么？
在<div class="nav-collapse collapse">行添加一些新类，我们将其命名为.menu1。因此，新的代码将是<div class="nav-collapse collapse menu1">。然后将data-target=".nav-collapse"更改为data-target=".menu1"。
你可以对第二个菜单和一些新的.menu2类做同样的事情，或者让它保持原样(它会起作用，因为两个菜单都有不同的data-target)。
这是工作演示http://jsfiddle.net/xmLDd/
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
复制相关文章
相似问题
腾讯云开发者
