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

Question

我正在使用 Twitter-Bootstrap 和 Simple-Navigation gem 使用 Ruby on Rails 开发一个 Web。导航菜单在任何浏览器上都可以正常工作，如下所示：

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

有什么想法吗？

手机版nav_menu的代码：

<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>

Answer 1

显示导航菜单时出现折叠导航菜单设置固定高度值，防止子菜单下拉显示时div放大：

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

在 style.css 中添加这一行，将 height 属性设置为 auto，允许 div 在需要时放大，显示整个菜单：

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

也许有一个更清洁的解决方案，但这对我来说效果很好，并且不想更改 Bootstrap 代码本身。

A link displaying some usefull info about similar issues.