精简代码后移动端Bootstrap导航菜单失效且偏移屏幕求助

我仔细梳理了你的代码情况，发现问题主要出在自定义样式的冲突上，咱们一步步来搞定：

1. 移除/修正导致偏移的全局定位样式 #

你代码里写了这段全局生效的CSS：

.navbar-nav {
  position: absolute;
  right: 0;
  top: 100%;
}

这种绝对定位加right: 0的设置，在移动端窄屏环境下会直接把导航菜单挤到屏幕右侧外面去。解决办法有两个：

• 直接删掉这段全局样式，让Bootstrap默认的移动端导航布局生效；
• 给这段样式加媒体查询限制，只在桌面端生效：

  @media (min-width: 992px) {
    .navbar-nav {
      position: absolute;
      right: 0;
      top: 100%;
    }
  }
  

2. 保留Bootstrap导航的核心结构类 #

精简代码时别误删关键类，比如navbar-expand-lg这个类是控制导航在大屏展开、小屏折叠的核心开关，一定要保留，不然移动端的汉堡菜单逻辑会失效。

3. 测试验证 #

调整完样式后，移动端点击汉堡按钮，菜单就能正常在屏幕内展开了。之后如果要自定义导航样式，尽量用Bootstrap的工具类，或者放在对应断点的媒体查询里，避免全局样式覆盖移动端的默认布局。

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