Twitter bootstrap Bootsrap页面冲突中的两个响应导航条
使用引导响应框架,我必须在页面中使用两个导航栏。它们工作正常,但在切换模式下,单击图标会列出两个“nav collapce”项目 我试图将折叠类名重命名为第二个类,但没有成功。你能告诉我如何在没有任何冲突的情况下运行两次“导航崩溃”吗Twitter bootstrap Bootsrap页面冲突中的两个响应导航条,twitter-bootstrap,navbar,Twitter Bootstrap,Navbar,使用引导响应框架,我必须在页面中使用两个导航栏。它们工作正常,但在切换模式下,单击图标会列出两个“nav collapce”项目 我试图将折叠类名重命名为第二个类,但没有成功。你能告诉我如何在没有任何冲突的情况下运行两次“导航崩溃”吗 <div class="navbar"> <div class="navbar-inner"> <div class="container"> <a class="btn btn-navbar" d
<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>
在Twitter引导中,
.nav collapse
是一个重要的类,所以不要更改它。什么是最好的解决方案
在线
添加一些新类,我们称之为.menu1
。这样新代码将
。然后数据目标=“.nav collapse”
更改为数据目标=“.menu1”
您可以对第二个菜单和一些新的.menu2
类执行相同的操作,或者保持原样(这将起作用,因为两个菜单的数据目标不同)
下面是正在进行的演示为导航折叠
元素提供唯一的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>
...
...
...
...
...
否决票是怎么回事?这与已接受的答案相同,但使用的是ID而不是一次性课程(实际上是ID)。很抱歉,我不是故意这么做的。一定是无意中单击了箭头-编辑您的答案,我将删除否决票。在ID=”中缺少结束引号。“nav primary>
-我试图为您编辑它,但不允许我进行单个字符的编辑:(谢谢,@snipe。我修正了我的答案。嗨,我如何区分一个导航栏中的两个导航栏折叠?我已经命名了不同的数据目标,但这仍然不起作用。。。