Bootstrap 3移动端导航显示异常求助：下拉菜单被内容遮挡

这个问题我做项目时也碰到过，大概率是z-index层级冲突或者容器定位的问题导致下拉菜单被页面内容压在后面了。咱们一步步来排查和解决：

1. 给导航栏设置足够高的z-index #

Bootstrap 3的.navbar默认是position: relative，但如果自定义样式或页面其他元素覆盖了它的层级，就会出问题。可以直接给导航栏加个明确的z-index：

.navbar.navbar-default {
  position: relative;
  z-index: 1000; /* 数值可根据页面调整，确保比页面主体内容的z-index高 */
}

另外要注意：不要给导航栏的父容器设置overflow: hidden，不然下拉菜单会被直接裁切，根本显示不出来。

2. 给下拉菜单单独提层级 #

有时候导航栏的z-index够了，但下拉菜单的层级还是被压，可以单独给下拉菜单加更高的z-index：

.navbar .dropdown-menu {
  z-index: 1001; /* 比导航栏本身高一点，确保它能浮在最上层 */
}

3. 排查自定义样式的冲突 #

从你贴的代码来看，结构和Bootstrap官方示例一致，问题大概率出在自定义样式上：

• 检查.phone-home、.logo这些自定义类有没有设置position: relative或者z-index，有可能干扰了导航栏的层级结构；
• 那个{if segment_1 == ""}hidden-xs{/if}的条件判断，你可以先临时去掉它，测试下拉菜单是否正常，再逐步加回来排查是否是这个条件导致导航栏结构异常。

4. 检查页面主体内容的层级 #

看看页面的主体内容（比如.container或自定义的.main-content类）有没有设置position: relative且z-index比导航栏高的情况。如果有，要么调低内容的z-index，要么把导航栏的z-index调得比它更高。

快速排查技巧 #

用浏览器的开发者工具（按F12）选中下拉菜单元素，查看它的computed样式里的z-index和position，同时对比它的父元素.navbar以及页面主体内容的层级，很快就能定位到哪个元素的层级导致了覆盖。

内容的提问来源于stack exchange，提问作者forrest