html - 溢出 : hidden conundrum on mobile devices

Question

我有 2 个引导导航栏，紧接着是 2 个水平居中的下拉菜单，如下所示...

<div class="bodyWrapper"> 

  <!-- top navbar - doesn't change size-->
  <div class="navbar navbar-fixed-top navbar-inverse nav-top">
    ...
  </div>

  <!-- bottom navbar - collapses and changes size-->
  <nav class="navbar navbar-inverse navbar-static-top" >
    ...
  </nav>    

  <!-- 2 dropdown menus, always centered, and underneath the navbars-->
  <div style="width: 100%;">
      <div style="position: relative; left: 50%; top: -20px;">
              <nav id="menu" class="menu"> 
              </nav>
              <nav id="menu2" class="menu"> 
              </nav>
      </div>
  </div>

</div> 

仅通过此设置，移动设备上就会出现一个水平滚动条，允许用户滚动到空白区域，而不是我的顶部导航栏(由于某种原因继续填满整个屏幕)。我不知道为什么会这样，但要解决它，我可以添加这个 CSS...

.bodyWrapper {
  position : relative; 
  overflow : hidden;
}

(我首先尝试将 overflow/overflow-x:hidden 属性应用于 body/html 但它并没有删除我 iPhone 上的滚动条)。

但此选项的问题在于，由于下拉菜单现在位于带有 overflow:hidden 的包装器中，因此当用户尝试展开它们时，它们会被切断。

我能想出的唯一解决方案是将下拉菜单置于 bodyWrapper div 之外并对其使用绝对定位 - 但这是一个非常糟糕的选择，因为我不得不不断地重新调整它们的位置，因为高度它们上方的导航栏数量可以增长。

无论如何，要问是否有人能找到更好的方法来处理这个特定于移动设备(至少是 iPhone)的问题，所有这些都是很长的路要走。感谢您的任何想法!

---

编辑

请求示例: http://codepen.io/d3wannabe/pen/gaVXzO (css 的最后一行可以被注释掉，以查看下拉列表会发生什么)

Answer 1

您可以将下拉类的显示设置为 inline-block 及其父级以将文本居中对齐。

.dropdown{
    display:inline-block;
 }

在这里查看:http://codepen.io/anon/pen/aveEoP