如何实现Bootstrap固定顶部导航栏的水平滚动并禁用垂直滚动

核心思路 #

要达成需求，关键是给fixed-top导航栏禁用垂直溢出，同时给需要滚动的子容器开启水平溢出自动滚动，还要强制子元素不换行，这样窗口缩窄时才会触发横向滚动。

完整代码示例 #

HTML结构

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
  <!-- 第一个div：无滚动，自适应宽度 -->
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Brand</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent">
      <span class="navbar-toggler-icon"></span>
    </button>
  </div>

  <!-- 第二个div：按需触发水平滚动的容器 -->
  <div class="nav-scroll-container">
    <ul class="navbar-nav d-flex flex-row">
      <li class="nav-item"><a class="nav-link" href="#">Link 1</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Link 2</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Link 3</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Longer Link Text Here</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Another Long Link</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Link 6</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Link 7</a></li>
    </ul>
  </div>
</nav>

CSS样式

/* 给fixed-top导航栏禁用垂直滚动，固定高度避免垂直溢出 */
.navbar.fixed-top {
  overflow-y: hidden;
  height: 60px;
  align-items: center;
}

/* 第二个div的滚动容器核心设置 */
.nav-scroll-container {
  overflow-x: auto; /* 开启水平自动滚动 */
  white-space: nowrap; /* 强制子元素不换行，触发横向溢出 */
  scrollbar-width: thin; /* 优化滚动条样式（可选） */
}

/* 确保导航项横向排列不换行 */
.nav-scroll-container .navbar-nav {
  flex-wrap: nowrap;
}

/* 自定义webkit内核浏览器滚动条样式（可选） */
.nav-scroll-container::-webkit-scrollbar {
  height: 6px;
}
.nav-scroll-container::-webkit-scrollbar-thumb {
  background-color: rgba(255,255,255,0.3);
  border-radius: 3px;
}

关键细节说明 #

• overflow-y: hidden：直接给fixed-top导航栏设置，彻底禁用垂直方向滚动。
• white-space: nowrap：必须给第二个滚动容器添加，否则导航项会自动换行，无法触发横向溢出。
• flex-wrap: nowrap：配合Bootstrap的navbar-nav，确保导航项始终横向排列，和white-space规则协同生效。
• 固定导航栏高度：避免内容过多时垂直方向撑破导航栏，保证垂直滚动完全被禁用。

设置完成后，第一个div会自适应窗口宽度，第二个div在窗口缩窄到不足以容纳所有导航项时，自动出现横向滚动条，且整个导航栏不会产生垂直滚动。

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