Question

我试图自定义网站上的导航栏。我遇到问题的部分是三行，当屏幕较小时应该以下拉方式显示菜单的其余部分。

当我点击3行按钮时，没有任何反应，我无法访问菜单栏的其余部分，但是当我点击它时它会改变颜色，所以我知道它知道我点击了它。

这是我的application.html文件：

<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<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>
  <%= link_to 'Home', root_path, class: 'navbar-brand' %>
</div>
<div class="collapse navbar-collapse">
  <ul class="nav navbar-nav">
    <%= render 'layouts/navigation_links' %>
  </ul>
</div>
</div>
</nav>

以下是列出我想要显示的链接的布局/ navigation_links

 <%# add navigation links to this file %>
 <% if user_signed_in? %>
   <li><%= link_to 'Edit account', edit_user_registration_path %></li>
   <li><%= link_to 'Sign out', destroy_user_session_path, :method=>'delete' %></li>
 <% else %>
   <li><%= link_to 'Sign in', new_user_session_path %></li>
   <li><%= link_to 'Sign up', new_user_registration_path %></li>
 <% end %>
 <% if user_signed_in? %>
   <li><%= link_to 'Users', users_path %></li>
 <% end %>

这是我的application.css文件（在assets / stylesheets下）

 body{
    margin-right: 10px;
    margin-left: 10px;
    background-color: #eeeeee;
 }
 .navbar-inverse{
    background-color: #000000;
 }
 .navbar-inverse{ 
    border-color: #33aa22;
 }

当网页为完整尺寸时，菜单栏的其余部分会出现，并且navigation_links会显示并正常工作。我不知道为什么当页面很小时它不起作用所以任何帮助都会很棒！

CSS导航栏折叠菜单问题

0 个答案: