Bootstrap Sass 3.3.6 - Javascript - Navbar Dropdown - Nicht Expanding

Question

Neueinsteiger: Bootstrap Sass 3.3.6 - Javascript - Navbar Dropdown - Nicht Expanding

---

application.html.erb

Kopf:

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> 
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> 
<%= csrf_meta_tags %> 

---

application.html.erb

Körper:

<nav class="navbar navbar-default navbar-fixed-top app-navbar" role="navigation"> 
<div class="container"> 
    <div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-navbar-collapse"> 
     <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 'Home', root_path, class: 'navbar-brand' %> 
    </div> 
    <div class="collapse navbar-collapse" id="main-nav-collapse"> 
    <ul class="nav navbar-nav navbar-left"> 
     <li><%= link_to "Page1", "Page1" %></li> 
     <li><%= link_to "Page2", "Page2" %></li> 
     <li><%= link_to "Page3", "Page3" %></li> 
     <li><%= link_to "Page4", "Page4" %></li> 
     <li><%= link_to "Page5", "Page5" %></li> 
    </ul> 
    </div> 
</div> 

---

application.js:

//= require jquery 
//= require jquery_ujs 
//= require bootstrap 
//= require turbolinks 
//= require_tree . 

Answer 1

Ihre Daten-Ziel (data-target="#main-navbar-collapse") und ID (id="main-nav-collapse") stimmen nicht überein.

ihnen die gleiche Marke:

data-target="#main-navbar-collapse" und id="main-navbar-collapse"

Auch Ihre <nav> nicht geschlossen ist: </nav> hinzufügen.

<nav class="navbar navbar-default navbar-fixed-top app-navbar" role="navigation"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-navbar-collapse"> 
 
     <span class="sr-only">Toggle Navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <%=l ink_to 'Home', root_path, class: 'navbar-brand' %> 
 
    </div> 
 
    <div class="collapse navbar-collapse" id="main-navbar-collapse"> 
 
     <ul class="nav navbar-nav navbar-left"> 
 
     <li> 
 
      <%=l ink_to "Page1", "Page1" %> 
 
     </li> 
 
     <li> 
 
      <%=l ink_to "Page2", "Page2" %> 
 
     </li> 
 
     <li> 
 
      <%=l ink_to "Page3", "Page3" %> 
 
     </li> 
 
     <li> 
 
      <%=l ink_to "Page4", "Page4" %> 
 
     </li> 
 
     <li> 
 
      <%=l ink_to "Page5", "Page5" %> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav>