/ / बूटस्ट्रैप - मोबाइल पर बंद होने वाले नेबर नहीं - html, css, रूबी-ऑन-रेल, ट्विटर-बूटस्ट्रैप, मोबाइल

बूटस्ट्रैप - नेविबार मोबाइल पर बंद नहीं - एचटीएमएल, सीएसएस, रूबी-ऑन-रेल, ट्विटर-बूटस्ट्रैप, मोबाइल

मैं अपनी पहली वेबसाइट को विकसित करने के लिए रेल और बूटस्ट्रैप पर माणिक का उपयोग कर रहा हूं। मेरी वेबसाइट में नेवी बार को बूटस्ट्रैप पर लागू किया जाता है। हालाँकि, एक बार खोलने पर यह नेव बार बंद नहीं होता है। 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 -->

सीएसएस:

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

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

उत्तर:

जवाब के लिए 0 № 1

ऐसा लगता है जैसे आप div को बंद नहीं कर रहे हैं:

<div class="collapse navbar-collapse">

यह कुछ मुद्दों का कारण हो सकता है।