Bootstrap 5下拉菜单点击触发垂直滚动，如何保留水平滚动并修复？

问题现象 #

点击导航栏的下拉菜单时，菜单没有从容器中正常弹出，而是被垂直截断/出现滚动，无法完整显示，但需要保留导航栏的水平滚动功能。

原因分析 #

.nav-scroller容器设置了固定高度height: 2.75rem和overflow-y: hidden，同时该容器为相对定位（position: relative）。Bootstrap的下拉菜单默认是绝对定位，会相对于这个.nav-scroller容器定位，导致下拉菜单超出容器垂直范围的部分被overflow-y: hidden截断，出现显示异常。

解决方案 #

通过修改.nav-scroller的溢出规则，用clip-path替代overflow-y: hidden，既能限制导航栏自身的垂直显示范围，又不会截断绝对定位的下拉菜单，同时保留overflow-x: auto维持水平滚动功能。

修改后的CSS代码 #

.nav-scroller {
  position: relative;
  z-index: 2;
  height: 2.75rem;
  /* 替换overflow-y:hidden为clip-path，限制垂直显示范围但不截断下拉菜单 */
  clip-path: inset(0 0 0 0);
  background-color: #212529 !important;
}
.nav-scroller .nav {
  display: flex;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  margin-top: -1px;
  overflow-x: auto;
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
.navbar-nav .nav-link, .navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
  color: #fff;
}

完整代码示例 #

HTML

<nav class="navbar navbar-expand navbar-dark bg-dark">
    <div class="container-fluid">
      <div class="nav-scroller bg-body" id="navbarsExample03">
        <ul class="nav navbar-nav me-auto mb-2 mb-sm-0">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" aria-disabled="true">Link 2</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
          </li>
          <li class="nav-item">
            <a class="nav-link" aria-disabled="true">Link 3</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" aria-disabled="true">Link 4</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" aria-disabled="true">Link 5</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" aria-disabled="true">Link 6</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" aria-disabled="true">Link 7</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" aria-disabled="true">Link 8</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

CSS

.nav-scroller {
  position: relative;
  z-index: 2;
  height: 2.75rem;
  clip-path: inset(0 0 0 0);
  background-color: #212529 !important;
}
.nav-scroller .nav {
  display: flex;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  margin-top: -1px;
  overflow-x: auto;
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
.navbar-nav .nav-link, .navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
  color: #fff;
}

原理说明 #

clip-path: inset(0 0 0 0)会按照容器边界裁剪内容，但不会影响绝对定位的子元素，因此下拉菜单可以正常弹出显示；overflow-x: auto则保留了导航栏的水平滚动功能，完美解决两者的冲突。

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