当 bootstrap 导航菜单中的项目超出容器宽度时，可通过禁用换行（flex-wrap: nowrap）并启用 overflow-x: auto 实现平滑水平滚动，避免项目自动折行。
当 bootstrap 导航菜单中的项目超出容器宽度时，可通过禁用换行（flex-wrap: nowrap）并启用 overflow-x: auto 实现平滑水平滚动，避免项目自动折行。
默认情况下，Bootstrap 的 .nav 容器（如 .nav-pills）使用 flex-wrap: wrap，这会导致子项在空间不足时换行显示，从而掩盖了水平滚动的需求。要实现真正的横向滚动体验，关键在于强制所有导航项保持单行排列，同时确保容器具备溢出裁剪与滚动能力。
以下是推荐的 CSS 解决方案：
.nav.tab-listing {
display: flex;
flex-wrap: nowrap; /* 关键：禁止换行 */
overflow-x: auto; /* 启用水平滚动 */
width: 100%;
padding: 0.5rem 0; /* 可选：提升视觉舒适度 */
scrollbar-width: thin; /* Firefox：细滚动条 */
}
.nav.tab-listing li {
margin-right: 10px; /* 项目间留白，避免拥挤 */
white-space: nowrap; /* 防止文字内部换行 */
}
/* 可选：隐藏滚动条轨道（仅 Chrome/Edge） */
.nav.tab-listing::-webkit-scrollbar {
height: 6px;
}
.nav.tab-listing::-webkit-scrollbar-thumb {
background-color: #adb5bd;
border-radius: 3px;
}⚠️ 注意事项：
- 务必移除或覆盖默认的 flex-wrap: wrap —— Bootstrap 5 的 .nav 类默认包含 flex-wrap: wrap，若未显式重置，滚动将失效；
- 确保父容器有明确宽度限制（如 width: 100% 或固定像素值），否则 overflow-x 可能不触发；
- 若使用 <a> 标签作为菜单项（推荐），请为 .nav li a 添加 display: block 和 padding，以保证点击区域完整；
- 在移动端，建议搭配 touch-action: pan-x 提升触屏拖拽体验；
- 测试时可临时添加 border: 1px solid red 到 .nav 查看实际渲染边界，辅助调试。
最终效果：菜单项始终水平排列，超出部分可通过鼠标滚轮、触控拖拽或滚动条浏览，兼顾响应性与用户体验。
