菜單切換BS3和nav-pills

Question

<nav class="navbar" role="navigation"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-navbar-collapse1"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <%= link_to image_tag("erb_logo.png", alt: "Eco Rebox"), root_path, class: "mainlogo navbar-brand" %> 
    </div> 
    <div class="collapse navbar-collapse" id="bs-navbar-collapse1"> 
     <ul class="nav nav-pills pull-right"> 
     <li><%= link_to 'Home', root_path, class: 'first' %></li> 
     <li><%= link_to 'News', posts_path, class: 'blog' %></li> 
     <li class="dropdown second"> 
      <a href="about" class="dropdown-toggle" data-toggle="dropdown"> 
      About <span class="caret"></span> 
      </a> 
      <ul class="dropdown-menu"> 
      <li><%= link_to 'Company Profile', about_path %></li> 
      <li><%= link_to 'Our Customers', companies_path %></li> 
      <li><%= link_to 'What People Are Saying', testimonials_path %></li> 
      </ul> 
     </li> 
     <li class="dropdown third"> 
      <a href="logistics" class="dropdown-toggle" data-toggle="dropdown"> 
      Solutions <span class="caret"></span> 
      </a> 
      <ul class="dropdown-menu"> 
      <li><%= link_to 'Software', software_path %></li> 
      <li><%= link_to 'Sustainability', rethink_path %></li> 
      <li><%= link_to 'Logistics & Methodology', restore_path %></li> 
      </ul> 
     </li> 
     <li class="dropdown fourth"> 
      <a href="products" class="dropdown-toggle" data-toggle="dropdown"> 
      Products <span class="caret"></span> 
      </a> 
      <ul class="dropdown-menu"> 
      <li><%= link_to 'Reusable Boxes', reuse_path %></li> 
      <li><%= link_to 'Shipping Containers', shipping_path %></li> 
      </ul> 
     </li> 
     <li><%= link_to "Contact", contact_path, class: 'fifth' %></li> 
     <% if signed_in? %> 
     <li class="dropdown sixth"> 
      <a href="user" class="dropdown-toggle" data-toggle="dropdown"> 
      My Account <span class="caret"></span> 
      </a> 
      <ul class="dropdown-menu"> 
      <li><%= link_to "Dashboard", current_user %></li> 
      <li><%= link_to "Settings", edit_user_path(current_user) %></li> 
      <li class="divider"></li> 
      <li><%= link_to "Sign out", signout_path, method: "delete" %></li> 
      </ul> 
     </li> 
     <% else %> 
     <li><a href="#signinModal" role="button" data-toggle="modal">Sign in</a></li> 
     <% end %> 
     </ul> 
    </div> <!--/.navbar-header --> 
    </div> <!--/.container --> 
</nav> 

所以...這是一個標題菜單...但不是默認值。 http://www.ecorebox.com/ - 你可以在那裏看到它。我試圖讓響應式菜單起作用。我之前已經設置了它，但是使用了default-navbar。我相信<navbar-header>部分應該呈現一個按鈕，以在xs模式下顯示/隱藏菜單。儘管如此，我似乎無法使其發揮作用。

任何幫助將不勝感激！

Answer 1

<div class="collapse navbar-collapse" id="bs-navbar-collapse1"> 

上面沒有包裹菜單。

但是，您還有其他錯誤。通過驗證器運行它，修復錯誤。確保崩潰包圍着你想要摺疊的東西。

沒有什麼顯示圖標欄，所以你需要解決的問題也丸不堆疊在小尺寸，但在這裏它的作品。

http://jsbin.com/USEhecUZ/1/