css - Bootstrap Hamburger 菜单在 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 类都列为 hidden-sm，这将在桌面和移动设备之间隐藏它们。取出这个类，它会完美地工作。