Question

我在rails和bootstrap上使用ruby来开发我的第一个网站。我网站中的导航栏是使用bootstrap实现的。但是，在mobile上打开导航栏后，导航栏不会关闭。如果您单击或点击右上角的“菜单”按钮，导航栏会打开，但如果您再次点击该按钮或外部，则导航栏不会关闭并继续闪烁。

与移动设备上的相同代码相关的另一个问题是，下拉菜单根本不打开。我认为它与菜单的悬停功能有关，但我似乎无法修复它。

这是我的代码。

HTML：

<nav class="navbar navbar-default navbar-fixed-top" role="navigation" id="navbar_id" data-toggle="collapse" data-target=".navbar-collapse"> <!-- START OF NAVIGATION BAR -->
    <div class="container"><!-- START OF CONTAINER -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <%= link_to image_tag("logo.png", class: "img-responsive"), root_path, class:"name" %>
        </div>
          <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav" id="navbar_menus">
              <li><%= link_to "Item1", sample_path%></li>
              <li><%= link_to "Item2", sample_path%></li>
              <li><%= link_to "Item3", sample_path %></li>

              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Programs<b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><%= link_to "Item1", sample_path%></li>
                  <li><%= link_to "Item2", sample_path%></li>
                  <li><%= link_to "Item3", sample_path%></li>
                </ul>
              </li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><%= link_to "Item1", sample_path%></li>
                </ul>
              </li>

              <li><%= link_to "Contact Us", sample_path %></li>

            </ul>
    </div><!-- END OF CONTAINER -->
</nav><!-- END OF NAVIGATION BAR -->

CSS：

#navbar_menus{
    padding: 3.6em 0 0 1em;
}

@media (min-width: 979px) {
  ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
  }
}

Answer 1

好像你没有关闭div：

<div class="collapse navbar-collapse">

这可能会导致一些问题。

bootstrap - 导航栏未在移动设备上关闭

1 个答案: