Bootstrap汉堡包菜单在iPad mini上不显示链接

Question

对于大屏幕，汉堡菜单完美地工作（将中断点改为1200）。在手机上，菜单完美运行。

在iPad上，汉堡包菜单显示正常，但点击它时，选项不显示！请帮忙！！！谢谢。

这里是HTML

<div class="navbar navbar-default navbar-fixed-top navbar-fixed-top-real" role="navigation"> 
    <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 situations_path do %> 
     <%= image_tag('A-Lister_Logo.png', class: "navbar-brand", height: '60', :alt => "A-Lister Logo") %> 
     <% end %> 
    </div> 
    <div class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav navbar-right"> 
     <li class="hidden-sm"> 
      <%= link_to 'Hot Situations', situations_path %> 
     </li> 
     <li class="hidden-sm"> 
      <%= link_to 'New Situations', newest_situations_path %> 
     </li> 
     <li class="hidden-sm"> 
      <%= link_to 'A-Listers', alisters_path %> 
     </li> 
     <li class="hidden-sm"> 
      <%= link_to 'Add Situation', new_situation_path %> 
     </li> 
     <% if !(user_signed_in?) %> 
      <li class="hidden-sm"> 
      <%= link_to('Become an A-Lister', new_user_registration_path) %> 
      </li> 
      <li class="hidden-sm"> 
      <%= link_to('Login', new_lister_session_path) %> 
      </li> 
     <% else %> 
      <li class="hidden-sm"> 
      <%= link_to(("My Situations"), my_situations_path) %> 
      </li> 
      <li class="hidden-sm"> 
      <%= link_to(("Edit Account"), edit_user_registration_path) %> 
      </li> 
      <li class="hidden-sm"> 
      <%= link_to('Logout', destroy_user_session_path, :method => :delete) %> 
      </li> 
     <% end %> 
     </ul> 
    </div><!--/.nav-collapse --> 
    </div> 
</div> <!--/.navigation --> 

这里是CSS.SCSS

body { 
    font-family: 'Merriweather', serif; 
    color: black; 
    padding-top: 70px; 
} 

@media (max-width: 1200px) { 
    .navbar-header { 
     float: none; 
    } 
    .navbar-left,.navbar-right { 
     float: none !important; 
    } 
    .navbar-toggle { 
     display: block; 
    } 
    .navbar-collapse { 
     background: white; 
    } 
    .navbar-fixed-top { 
     top: 0; 
     border-width: 0 0 1px; 
    } 
    .navbar-collapse.collapse { 
     display: none!important; 
    } 
    .navbar-nav { 
     float: none!important; 
     margin-top: 7.5px; 
    } 
    .navbar-nav>li { 
     float: none; 
    } 
    .navbar-nav>li>a { 
     padding-top: 10px; 
     padding-bottom: 10px; 
     line-height:0; 
    } 
    .collapse.in{ 
     display:block !important; 
    } 
} 

.navbar-fixed-top-real { 
    font-size:100%; 
    background: white; 
    border-bottom: 3px solid rgb(222,0,32); 
    max-height: 70px; 
    z-index:2; 
} 

.navbar-nav li a { 
    padding-top: 45px; 
    z-index:2; 
    font-size: 118%; 
} 

感谢您的帮助！

Answer 1

所有的li类都被列为隐藏sm，这将隐藏在桌面和移动设备之间。拿出这门课，它会很好地工作。