Question

新手：Bootstrap Sass 3.3.6 - Javascript - Navbar Dropdown - 不扩展

application.html.erb

目：

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

application.html.erb

身体：

<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

您的数据目标（data-target="#main-navbar-collapse"）和ID（id="main-nav-collapse"）不匹配。

使它们相同：

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

此外，您的<nav>尚未关闭：添加</nav>。

＆＃13;

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

＆＃13;

Bootstrap Sass 3.3.6 - Javascript - Navbar Dropdown - 不扩展

1 个答案: