bootstrap - navbar не закривається на мобільному - html, css, ruby-on-рейлі, twitter-bootstrap, mobile

Я використовую рубін на рейках та завантажувальну стрічку для розробки свого першого веб-сайту. Наві-панель на моєму веб-сайті реалізована за допомогою завантажувальної програми. Однак панель наві не закривається, коли ви відкриєте його 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;
}
}

Відповіді:

Здається, ви не закриваєте div:

<div class="collapse navbar-collapse">

Це може спричинити деякі проблеми.