css - bootstrap 3 rails 4 响应式导航栏 "icon-bar"不扩展

Question

当我过度缩小我的页面时，或者如果我在移动设备上，我的导航栏会变成一个三行的小按钮，显然称为“图标栏”。当我单击或触摸此按钮时，没有任何反应。这是每个平台、移动设备、笔记本电脑等都存在的问题......

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
 </div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="div-navbar-thing">
  <ul class="nav navbar-nav">
    <% if logged_in? && current_user.status == 'career/education' %>
      <% if current_user.username == 'Curry' %>
        <li><%= link_to 'Add skill', new_skill_path(@skill), class: 'navbar-brand' %></li>
      <% end %>
      <li class='clearfix'><%= link_to 'References', references_path, class: 'navbar-brand' %></li>
      <li class='clearfix'><%= link_to 'My Degree', courses_path, class: 'navbar-brand' %></li>
      <li class='clearfix'><%= link_to 'logout',  logout_path,    class: 'navbar-brand' %></li>
      <li class='clearfix'><%= link_to 'Search Jobs',  jobs_path,    class: 'navbar-brand' %></li>




      <li class='clearfix'><%= link_to '#', class: 'navbar-brand dropdown-toggle', 'data-toggle' => 'dropdown', "data-no-turbolink" => true do %>
        <%= current_user.username %> <span class='caret'></span>
      <% end %>
        <ul class='dropdown-menu'>
          <li class='clearfix'> <%= link_to "My Profile", user_skill_path(current_user) %> </li>
          <li class='clearfix'> <%= link_to 'Edit My Profile', edit_user_path(current_user) %></li>
          <li class='clearfix'> <%= link_to 'My Library', user_skills_path(:id => current_user.id) %></li>
          <li class='clearfix'> <%= link_to 'My Docs/resumes',     resumes_path %></li>
        </ul>

      <li class='clearfix'><div class="btn-group nav_item">
      <%= link_to '#', class: 'navbar-brand', 'data-toggle' => 'dropdown' do %>
      Earn Skills <span class='caret'></span>
    <% end %>         
      <ul class="dropdown-menu">
        <% Category.all.each do |category| %>
          <li>
            <%= link_to category.name, category_path(category) %>
          </li>
          <% end %>
          <li class="divider"></li>
          <li><%= link_to 'All Categories', skills_path %></li>
      </ul>
    </li>

    <% elsif logged_in? && current_user.status == 'Employer' %>

      <li><%= link_to 'logout',  logout_path,    class: 'navbar-brand' %></li>
      <li><%= link_to 'Post Job',  new_job_path,    class: 'navbar-brand' %></li>
      <li><%= link_to 'view/edit Jobs', job_path(:id => current_user.id), class: 'navbar-brand' %></li>
      <li><%= link_to 'Search Users',  jobs_path,    class: 'navbar-brand' %></li>
      <li><%#= link_to 'Our Jobs',     job_path, %></li>
      <li><div class="btn-group nav_item">
      <%= link_to '#', class: 'navbar-brand', 'data-toggle' => 'dropdown' do %>
      View Skills <span class='caret'></span>
    <% end %>         
      <ul class="dropdown-menu">
        <% Category.all.each do |category| %>
          <li>
            <%= link_to category.name, category_path(category) %>
          </li>
          <% end %>
          <li class="divider"></li>
          <li><%= link_to 'All Categories', skills_path %></li>
      </ul>
    </li>

    <% else %>
      <li class='clearfix'><%= link_to 'log in',   login_path,    class: 'navbar-brand' %></li>
      <li class='clearfix'><%= link_to 'Register', new_user_path, class: 'navbar-brand' %></li>
      <li class='clearfix'><div class="btn-group nav_item">
      <%= link_to '#', class: 'navbar-brand', 'data-toggle' => 'dropdown' do %>
      Earn Skills <span class='caret'></span>
    <% end %>         
      <ul class="dropdown-menu">
        <% Category.all.each do |category| %>
          <li class='clearfix'>
            <%= link_to category.name, category_path(category) %>
          </li>
          <% end %>
          <li class="divider"></li>
          <li class='clearfix'><%= link_to 'All Categories', skills_path %></li>
      </ul>
    </li>
    <% end %>
    <li class='navbar-brand'><font color="red"><strong>Beta</strong></font></li>
    <li class='clearfix'><%= link_to 'Give us Feedback', 'http://www.facebook.com/jetpackedu', :target => '_blank' %></li>


  </ul>

</div><!-- /.navbar-collapse -->

当我删除该类时，该图标仍保留在移动应用程序上，或者如果我缩小页面，但当页面缩小到图标所在的位置时，没有可点击的链接。我想让 3 行的小图标栏起作用，或者只是将其全部删除。

Answer 1

将您的数据目标更改为“.navbar-collapse” 我刚刚在 S.O 的某个地方看到了这个但找不到它。这应该可以解决问题