jQuery的下拉菜单中引导平板电脑或手机大小

Question

不工作我有完美的作品，除了当我缩小浏览器到平板电脑或手机大小的导航栏的自举下拉（< 767px宽）。代码导航栏是：

<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像素的宽度。

有谁知道如何解决这个问题？似乎是bootstrap的JavaScript中的东西，但我无法弄清楚什么。

Answer 1

出于某种原因，包裹“下拉菜单，切换”和“下拉菜单”的div与类=“下拉菜单”另一个DIV解决了这个问题。所以，上面的代码，是用非常小的改动：

<div class="pull-right"> # DROPDOWN THAT WORKS SPORADICALLY 
<div id="user-nav"> 
    <div class="dropdown not-logged-in"> # <-- "dropdown" class added 
    <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> 

我不知道为什么这不仅影响了移动&平板电脑的尺寸，但这样是使用他人的框架的陷阱！