bootstrap - 导航栏不关闭移动

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

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

这是我的代码。

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; 
    } 
}

来源

2015-12-05 user2771150

您是否将bootstrap.js作为脚本源添加到您的文件中？它也需要jQuery，否则没有引导“动画”元素将工作。您可以在[Bootstrap官方文档]（http://getbootstrap.com/getting-started/）中找到它的解释 –

我使用CDN链接到引导文件。 – user2771150

对不起......恐怕我有点不知所措......什么是CDN？ –

好像你不关闭在div：

<div class="collapse navbar-collapse">

这可能会导致一些问题。

来源

2015-12-05 14:06:13 Haider

bootstrap - 导航栏不关闭移动

回答

相关问题