Question

http://boiling-garden-2168.herokuapp.com打开链接，当窗口足够小以使导航栏折叠时，您单击图标栏以取消折叠，只能点击我的下拉菜单和反馈链接。我的登录和注册链接无法点击。知道为什么吗？我好几天都在搞乱这个愚蠢的引导程序。我终于让崩溃工作了，但现在它们无法点击。另外，我需要涡轮增压链接..

<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=".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>
</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><%= link_to 'References', references_path, class: 'navbar-brand' %></li>
      <li><%= link_to 'My Degree', courses_path, class: 'navbar-brand' %></li>
      <li><%= link_to 'logout',  logout_path,    class: 'navbar-brand' %></li>
      <li><%= link_to 'Search Jobs',  jobs_path,    class: 'navbar-brand' %></li>




      <li><%= 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> <%= link_to "My Profile", user_skill_path(current_user) %> </li>
          <li> <%= link_to 'Edit My Profile', edit_user_path(current_user) %></li>
          <li> <%= link_to 'My Library', user_skills_path(:id => current_user.id) %></li>
          <li> <%= link_to 'My Docs/resumes',     resumes_path %></li>
        </ul>

      <li><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><%= link_to 'log in',   login_path,    class: 'navbar-brand' %></li>
      <li><%= link_to 'Register', new_user_path, class: 'navbar-brand' %></li>
      <li><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>
    <% end %>
    <li class='navbar-brand'><font color="red"><strong>Beta</strong></font></li>
    <li><%= link_to 'Give us Feedback', 'http://www.facebook.com/jetpackedu', :target => '_blank' %></li>


  </ul>

</div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Answer 1

您的.nav>li元素position: relative在折叠时与您的链接重叠。

一旦未折叠的Rails，bootstrap navbar链接无法点击

1 个答案: