我正在用Ruby on Rails开发一个web，使用Twitter引导和简单的导航gem。导航菜单在任何浏览器上都可以正常工作，如下所示：
当在移动设备上显示网页并单击导航按钮时，整个菜单显示在垂直块上，将标题的大小放大到可以容纳菜单的最大高度。问题是，打开任何子菜单都会增加菜单的大小，溢出并隐藏最后的选项，如您在比较中看到的：
知道吗？
手机版导航菜单代码：
<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;">
将此行添加到style.css将height属性设置为auto，允许div在需要时放大，显示整个菜单：
.container.nav-collapse.in.collapse{
height: auto !important;
}
也许有一个更干净的解决方案，但这对我来说很好，不想改变引导代码本身。
A link displaying some usefull info about similar issues.