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上看到了这个但却无法找到它。这应该解决问题

Answer 2

您是否启用了JavaScript且包含collapse plugin？您可以在Bootstrap 3 Documentation中找到可能描述您的问题的评论，特别是

需要JavaScript

如果禁用了JavaScript并且视口足够窄以致导航栏崩溃，则无法展开导航栏并查看.navbar-collapse内的内容。

以及

插件依赖

响应式导航栏要求collapse plugin包含在您的Bootstrap版本中。

Answer 3

代码中有一个拼写错误

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

bootstrap 3 rails 4 responsive navbar＆＃34; icon-bar＆＃34;没有扩大

3 个答案: