Bootstrap导航栏仅让下拉按钮支持水平滚动的实现需求

需求 #

• 仅按钮区域支持水平滚动
• 下拉菜单需正常显示在按钮正下方
• 下拉菜单不可推动下方段落，仅悬浮在段落上方

已遇到的问题 #

• 给.navbar-nav设置overflow-x:auto后，下拉菜单被滚动容器裁剪
• 使用position:static定位下拉菜单时，会向下挤压下方内容

解决方案 #

核心是分离滚动容器与下拉菜单的定位上下文，同时恢复下拉菜单的绝对定位实现悬浮：

1. 将水平滚动设置移至导航栏的折叠容器，避免裁剪下拉菜单
2. 强制导航菜单项横向排列不换行
3. 恢复下拉菜单的绝对定位，使其脱离文档流悬浮在内容上方
4. 确保每个导航项作为下拉菜单的定位基准

修改后的CSS代码：

/* 强制导航项横向排列，不换行 */
.navbar-nav {
    flex-wrap: nowrap;
    width: 440px;
}

/* 在折叠容器上设置水平滚动，避免裁剪下拉菜单 */
.collapse.navbar-collapse {
    overflow-x: auto;
    overflow-y: visible;
}

/* 恢复下拉菜单的绝对定位，实现悬浮效果 */
.navbar-nav .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
}

/* 确保导航项作为下拉菜单的定位上下文 */
.navbar-nav .nav-item {
    position: relative;
}

效果说明 #

• 导航按钮区域超出宽度时触发水平滚动，仅按钮区域可滚动
• 下拉菜单精准显示在对应按钮正下方，不会被滚动容器裁剪
• 下拉菜单采用绝对定位脱离文档流，悬浮在下方段落上方，不会挤压内容

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