如何解决Bootstrap导航菜单Flex容器水平滚动失效问题？

问题根源在于你设置的flex-wrap: wrap属性——它会让Flex子元素在空间不足时自动换行，和你需要的水平滚动逻辑冲突。以下是修正方案：

1. 调整容器CSS核心样式 #

将flex-wrap: wrap替换为flex-wrap: nowrap，同时优化滚动体验：

.nav.tab-listing {
    display: flex;
    flex-wrap: nowrap; /* 强制菜单项保持单行 */
    overflow-x: auto;
    width: 100%;
    padding-bottom: 8px; /* 给滚动条预留空间，避免遮挡菜单项 */
    scrollbar-width: thin; /* 可选：优化滚动条外观 */
}

2. 固定菜单项宽度，防止被压缩 #

添加样式确保菜单项不会被Flex容器挤压变形：

.nav.tab-listing li {
    flex-shrink: 0; /* 禁止菜单项被压缩 */
    white-space: nowrap; /* 防止菜单项内文本换行 */
}

3. 修正后的完整HTML代码 #

（注意修复原代码中最后一个<li>未闭合的错误）

<ul class="nav nav-pills tab-listing" id="pills-tab" role="tablist">
    <li class="nav-item"><a class="nav-link" href="#item1" role="tab">Item 1</a></li>
    <li class="nav-item"><a class="nav-link" href="#item2" role="tab">Item 2</a></li>
    <li class="nav-item"><a class="nav-link" href="#item3" role="tab">Item 3</a></li>
    <li class="nav-item"><a class="nav-link" href="#item4" role="tab">Item 4</a></li>
    <!-- 可添加更多菜单项测试滚动效果 -->
</ul>

关键说明 #

• flex-wrap: nowrap是实现水平滚动的核心，强制所有菜单项在一行排列，超出容器宽度时触发滚动。
• flex-shrink: 0保证每个菜单项维持自身宽度，不会被容器压缩变形。
• white-space: nowrap避免菜单项内的文本换行，保持整体布局一致性。

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