ブラウザーをタブレットまたは電話のサイズ (< 767px 幅) に縮小する場合を除いて、ナビゲーションバーに完全に機能するブートストラップ ドロップダウンがあります。navbar のコードは次のとおりです。
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a href="<%= root_url %>" class="brand brandtag"></a>
<a class="btn btn-navbar visible-phone" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="pull-right"> # DROPDOWN THAT WORKS SPORADICALLY
<div id="user-nav">
<div class="not-logged-in">
<a class="dropdown-toggle btn btn-inverse" href="<%= new_user_session_path %>" data-toggle="dropdown">
Login <span class='caret'></span>
</a>
<div class="dropdown-menu">
<%= render "devise/sessions/new_from_dropdown" %>
</div>
</div>
</div>
</div>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a>Link 1</a></li>
<li class="active"><a>Link 2</a></li>
<li class="active"><a>Link 3</a></li>
<li class="active"><a>Link 4</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
私のjavascriptは簡単です:
jQuery ->
$(".dropdown-toggle").attr("href", "#").dropdown()
$('.dropdown-menu form label.hide').hide()
$('.dropdown-menu input, .dropdown-menu label').on 'click', (e) ->
e.stopPropagation()
ドロップダウンは、より大きなサイズ (> 767px) では問題なく機能しますが、画面がそのサイズを下回ると、ドロップダウンは表示されなくなります。画面のサイズを大きくしたり小さくしたりすると、ドロップダウンが 767 ピクセルの幅を通過するときに、それぞれ戻ったり消えたりします。
これを修正する方法を知っている人はいますか?ブートストラップの JavaScript に何かあるようですが、何がわかりません。