Bootswatch（Bootstrap4）右侧多级导航菜单子菜单左向展开实现

我懂你的困扰——右侧导航的多级子菜单默认向右展开很容易超出视口，而原生的dropdown-menu-right在多级嵌套场景下根本起不到作用，这是因为Bootstrap的默认下拉定位逻辑是基于父元素向右对齐，嵌套时会延续这个方向。下面给你两种实用的解决方案，优先推荐纯CSS方案，简洁高效：

一、纯CSS解决方案（推荐） #

我们可以通过定位嵌套的子菜单，强制让它向左偏移，直接覆盖Bootstrap的默认样式。针对右侧导航的多级下拉场景，你可以用以下代码：

代码实现 #

/* 针对右侧导航的多级子菜单，强制向左展开 */
.navbar-nav .dropdown-menu .dropdown-menu {
  right: 100%; /* 让子菜单右侧对齐父菜单左侧，实现向左展开 */
  left: auto; /* 覆盖Bootstrap默认的left属性，避免冲突 */
  margin-right: 0.25rem; /* 可选：添加小间距避免菜单重叠 */
}

/* 兼容父菜单已用dropdown-menu-right的情况 */
.navbar-nav .dropdown-menu-right .dropdown-menu {
  right: 100%;
  left: auto;
}

逻辑说明 #

• right: 100% 是核心：让子菜单的右侧边缘和父菜单的左侧边缘对齐，直接实现向左展开的效果
• left: auto 用来覆盖Bootstrap默认的left属性值，防止样式冲突
• 如果你觉得菜单间距不合适，可以自行调整margin-right的数值

二、JavaScript解决方案（动态适配场景） #

如果你的导航需要根据视口宽度动态调整展开方向（比如小屏幕时恢复默认展开逻辑），可以用JS检测子菜单是否会超出视口，再动态调整位置：

代码实现 #

// 监听Bootstrap下拉菜单的显示事件
$('.dropdown').on('show.bs.dropdown', function () {
  const $dropdownMenu = $(this).find('.dropdown-menu');
  // 计算菜单右侧边缘的位置
  const menuRightPos = $dropdownMenu.offset().left + $dropdownMenu.outerWidth();
  // 获取当前视口宽度
  const viewportWidth = $(window).width();

  // 如果菜单会超出视口右侧，添加自定义类调整位置
  if (menuRightPos > viewportWidth) {
    $dropdownMenu.addClass('dropdown-menu-left-expand');
  } else {
    $dropdownMenu.removeClass('dropdown-menu-left-expand');
  }
});

对应的CSS类：

.dropdown-menu-left-expand {
  right: 100%;
  left: auto;
  margin-right: 0.25rem;
}

逻辑说明 #

• 通过show.bs.dropdown事件在菜单显示前完成位置检测
• 对比菜单右侧位置和视口宽度，动态添加/移除自定义样式类
• 这种方案更灵活，适合需要响应式适配的复杂场景

注意：Bootswatch只是Bootstrap的主题包，核心的下拉组件逻辑完全基于Bootstrap4，所以以上方案完全兼容所有Bootswatch主题，不需要修改主题源码。

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