Html 子菜单（下拉菜单）被截断且未在移动设备上显示

我正在用RubyonRails开发一个web，使用Twitter引导和简单的导航gem。导航菜单在任何浏览器上都可以正常工作，如下所示：

当在移动设备上显示web并单击导航按钮时，整个菜单显示在垂直块上，将标题的大小放大到无法容纳菜单的最大高度。问题是，打开任何子菜单都会增加菜单的大小，溢出并隐藏最后的选项，正如您在比较中所看到的：

有什么想法吗

移动版本上导航菜单的代码：

<div class="navbar navbar-static-top">
  <div class="navbar-inner">
    <div class="container">
      <a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <div class="brand">
        <a href="/en" id="home"><img alt="NRG Consulting logo" src="/assets/nrg-logo.png" title="NRG Consulting"></a>
      </div>
      <span class="development" id="rails-env"><span>development</span></span>
      <div class="container nav-collapse in collapse" style="height: 496px;">
        <ul class="nav pull-right align-top">
          <li>
            <a href="manual_path">
              Help
            </a>
          </li>
          <li>
            <a href="/es/clients">Español <img alt="Switch to English" class="lang" data-locale="en" src="/assets/lang-es.png" title="English"></a>
          </li>
        </ul>
        <ul class="nav pull-right align-bottom">
          <li id="home"><a href="/en">Home</a></li>
          <li id="formulas"><a href="/en/formulas">Formulas</a></li>
          <li id="deals"><a href="/en/deals">Deals</a></li>
          .
          .
          .
          <li class="active dropdown" id="admin">
            <a href="#" class="dropdown-toggle active" data-toggle="dropdown">Admin <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li id="subscription"><a href="/en/subscriptions">Subscriptions</a></li>
                <li class="divider" id="nav_header"></li>
                <li id="historic"><a href="/en/recalculate_product_histories/new">Recalculate historic prices</a></li>
                <li class="divider" id="nav_header"></li>
                <li id="export"><a href="/en/exports">export data</a></li>
                <li id="import_tuple_eod_check"><a href="/en/import_tuple_eod_checks">Check data</a></li>
                <li class="divider" id="nav_header"></li>
                <li id="alerts"><a href="/en/alerts">Alert</a></li>
                <li id="product_price_alerts"><a href="/en/product_price_alerts">Price alerts</a></li>
                <li id="import_tuples"><a href="/en/import_tuples">Import tuple</a></li>
                <li id="fixing_errors"><a href="/en/fixings_consistency_errors">fixing errors</a></li>
                <li class="divider" id="nav_header"></li><li id="redis"><a href="/en/resque">Resque</a></li>
                <li id="copycopter"><a href="http://copycopter.nrgconsulting.es/">Translate</a></li>
                <li class="divider" id="nav_header"></li>
                <li class="active simple-navigation-active-leaf" id="client"><a href="/en/clients" class="active">Clients</a></li>
                <li id="user"><a href="/en/users">Users</a></li>
                <li id="user_activities"><a href="/en/user_activities">User activity</a></li></ul></li>
                <li id="user"><a href="/en/users">Users</a></li>
              </ul>
      </div>
    </div>
  </div>
</div>

发展










.
.
.

显示导航菜单时，收拢的导航菜单显示为设置固定高度值，防止子菜单下拉菜单显示时div放大：

<div class="container nav-collapse in collapse" style="height: 496px;">

也许有一个更干净的解决方案，但这对我来说效果很好，我不想改变引导代码本身

.container.nav-collapse.in.collapse{
  height: auto !important;
}