引導3導軌4響應式導航欄“圖標欄”未擴展

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”，我剛剛在SO上的某處看到了此信息，但找不到它。 那應該解決問題

Answer 2

您是否啟用了JavaScript，並包含了崩潰插件 ？ 您可以在Bootstrap 3文檔中找到似乎可以描述您的問題的注釋，特別是

需要JavaScript

如果禁用了JavaScript並且視口足夠窄以至於導航欄折疊，則將無法展開導航欄並查看.navbar-collapse中的內容。

以及

插件依賴

響應式導航欄要求將崩潰插件包含在您的Bootstrap版本中。

Answer 3

代碼中有一個錯字

“＃bs-example-navbar-collapse-1”的“＃bs-example-navbar-collapse-1””