Question

我有2个bootstrap导航栏，紧接着是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

您可以将下拉类的显示设置为内联块，将其父级设置为文本对齐到中心。

fit$frame

点击此处：http://codepen.io/anon/pen/aveEoP

溢出：移动设备上隐藏的难题

修改

1 个答案: