Bootsrap頁面衝突中的兩個響應式導航欄

Question

使用Bootstrap響應式框架我必須在頁面中使用兩個導航欄。他們工作正常，但在切換模式下點擊圖標列出「nav-collapce」項目！

我試着重命名第二類的摺疊類名，但它不起作用。可否請您讓我知道我怎麼可以在沒有任何衝突的同時運行「NAV-垮垮兩次？

<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> 

Answer 1

在Twitter的引導，.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/

Answer 2

給了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>