Bootstrap 3导航栏下拉菜单被截断问题求助

遇到这种下拉菜单被横向滚动导航栏截断的情况，核心原因基本是滚动容器的overflow设置限制了下拉菜单的显示范围，下面给你几个实用的解决办法：

方法一：将下拉菜单挂载到body上（最推荐） #

Bootstrap的下拉菜单默认是相对于父级.dropdown元素定位的，如果父级处于一个设置了overflow-x: auto的容器内，下拉菜单就会被容器的边界裁剪。你可以通过data-container属性让下拉菜单直接追加到body元素下，彻底脱离滚动容器的限制：

修改你的dropdown元素，添加data-container="body"属性：

<div class="dropdown show" data-container="body">
  <a href="..." class="nav-sub dropdown-toggle" ...>
  <!-- 下拉菜单内容 -->
</div>

如果是通过JS初始化下拉菜单，也可以这样配置：

$('.dropdown').dropdown({
  container: 'body'
});

这个方法是Bootstrap官方推荐的方案，既能保留导航栏的横向滚动功能，又能彻底解决下拉菜单被截断的问题。

方法二：调整滚动容器的overflow属性 #

如果不想改变下拉菜单的挂载位置，可以尝试修改导航栏容器的overflow规则。找到你的.header-container-nav-master或.header-navigator容器的CSS，设置：

.header-container-nav-master {
  overflow-x: auto;
  overflow-y: visible;
}

注意：部分浏览器对overflow-x: auto和overflow-y: visible的组合支持有兼容问题，可能会自动把overflow-y解析成auto，导致下拉菜单依然被截断，所以这个方法优先级低于方法一。

方法三：提升下拉菜单层级（针对被覆盖场景） #

如果下拉菜单是被页面其他元素覆盖而非容器截断，可以给下拉菜单设置更高的z-index值：

.dropdown-menu {
  z-index: 9999; /* 可根据页面实际层级调整数值 */
}

建议优先尝试方法一，这个方案能覆盖绝大多数场景的问题。

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