Bootstrap4下拉子菜单超出框架，求左侧定位调整示例代码

问题场景 #

使用Bootstrap 4开发桌面端页面（100%宽度）时，二级下拉菜单会超出容器框架，默认响应式未触发，需要实现子菜单超出视口时自动向左定位，并同步调整箭头方向。

解决方案 #

1. 自定义CSS样式 #

通过样式规则控制子菜单定位，同时处理箭头方向：

/* 默认二级菜单向右展开 */
.dropdown-menu .dropdown-menu {
  right: auto;
  left: 100%;
  top: 0;
}

/* 桌面端专属逻辑 */
@media (min-width: 992px) {
  /* 子菜单基础定位 */
  .dropdown-menu.show .dropdown-menu.show {
    position: absolute;
    transform-origin: top left;
  }
  
  /* 超出视口时切换为左对齐 */
  .dropdown-menu.show .dropdown-menu.show.out-of-bound {
    left: auto;
    right: 100%;
    transform-origin: top right;
  }
  
  /* 调整左对齐时的箭头位置与方向 */
  .dropdown-menu.out-of-bound::before {
    left: auto;
    right: .75rem;
    border-left-color: #dee2e6;
    border-right-color: transparent;
  }
  
  .dropdown-menu.out-of-bound::after {
    left: auto;
    right: .8rem;
    border-left-color: #fff;
    border-right-color: transparent;
  }
}

2. JavaScript 检测逻辑 #

添加脚本动态判断子菜单是否超出视口，自动切换样式类：

document.addEventListener('DOMContentLoaded', function() {
  const dropdownToggles = document.querySelectorAll('.dropdown-toggle');
  
  dropdownToggles.forEach(toggle => {
    toggle.addEventListener('click', function() {
      const subMenu = this.nextElementSibling;
      if (subMenu && subMenu.classList.contains('dropdown-menu')) {
        setTimeout(() => {
          const rect = subMenu.getBoundingClientRect();
          // 判断是否超出视口右侧
          if (rect.right > window.innerWidth) {
            subMenu.classList.add('out-of-bound');
          } else {
            subMenu.classList.remove('out-of-bound');
          }
        }, 10); // 延迟确保菜单完成渲染
      }
    });
  });
});

3. 优化后的HTML结构 #

保留原有菜单结构，补全Bootstrap必要的属性：

<ul class="dropdown-menu show" aria-labelledby="navbarDropdownMenuLink" id="testDiv1">
  <li><a name="TEST1" class="dropdown-item" href="#">TEST1</a></li>
  <li><a name="TEST2" class="dropdown-item" href="#">TEST2</a></li>
  <li><a name="TEST3" class="dropdown-item" href="#">TEST3</a></li>
  <li><a name="TEST4" class="dropdown-item" href="#">TEST5</a></li>
  <li class="dropdown show">
    <a class="dropdown-item dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">TEST6</a>
    <ul class="dropdown-menu show" id="testDiv" aria-labelledby="dropdownMenuLink">
      <li><a name="TEST_DATA1" class="dropdown-item" href="#">TEST_DATA1</a></li>
      <li><a name="TEST_DATA2" class="dropdown-item" href="#">TEST_DATA2</a></li>
      <li><a name="TEST_DATA3" class="dropdown-item" href="#">TEST_DATA3</a></li>
    </ul>
  </li>
</ul>

说明 #

• 媒体查询确保仅在桌面端生效，不影响移动端菜单逻辑
• 脚本通过检测子菜单的视口位置，动态切换对齐方向
• 同步调整箭头样式，保证视觉一致性

内容的提问来源于stack exchange，提问作者J.Doe