Bootstrap 5.3.0导航栏折叠区外下拉菜单显示异常问题

核心解决方案 #

1. 调整下拉菜单定位属性 #

在用户下拉的触发链接上添加两个关键属性，修正默认的定位逻辑：

• data-bs-reference="parent"：将下拉菜单的定位容器切换为父级.nav-item，而非默认的触发元素本身
• data-bs-boundary="viewport"：确保下拉菜单不会被导航栏容器截断，适配视口边界显示

2. 自定义CSS优化（小屏幕适配） #

当屏幕宽度小于768px（导航栏折叠状态）时，添加CSS调整下拉菜单的绝对位置，避免与导航栏元素重叠：

@media (max-width: 767.98px) {
  .navbar-nav .dropdown-menu {
    position: absolute !important;
    right: 0;
    left: auto;
    top: 100%;
    margin-top: 0.125rem;
  }
}

修改后的完整代码 #

<nav class="navbar navbar-expand-md navbar-light bg-light">
  <div class="container-md">
    <a class="navbar-brand" href="#"><img src="news-logo.png" width="100px"></a>
    <button class="navbar-toggler order-first" data-bs-toggle="collapse" data-bs-target="#mynavbar"><span class="navbar-toggler-icon"></span></button>
    <div class="collapse navbar-collapse order-last order-md-1" id="mynavbar">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" href="#">items...</a>
        </li>
      </ul>
    </div>
    <ul class="navbar-nav order-md-2">
      <li class="nav-item dropdown ms-md-auto">
        <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" data-bs-reference="parent" data-bs-boundary="viewport">User</a>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Account</a></li>
          <li><a class="dropdown-item" href="#">Contact</a></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

原理说明 #

默认情况下，Bootstrap下拉菜单以触发元素为定位容器，导航栏折叠为垂直布局时，下拉菜单会被限制在导航栏的flex容器内。通过data-bs-reference="parent"切换定位容器到父级.nav-item，配合data-bs-boundary="viewport"避免截断，再通过CSS在小屏幕下调整绝对位置，让下拉菜单正确显示在导航栏外部区域。

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