Bootstrap汉堡菜单移动端点击后右移致横向滚动及空白问题

1. 修正视口配置，避免移动端缩放偏差 #

检查页面的视口标签，确保参数完整，限制安卓Chrome的视口计算异常：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

添加user-scalable=no和maximum-scale=1.0可防止用户缩放触发布局错乱，部分安卓Chrome版本会因缩放导致元素偏移。

2. 强制页面与导航栏的宽度约束 #

通过CSS限制页面横向溢出，同时确保导航栏始终匹配视口宽度：

/* 彻底禁止页面横向滚动 */
body {
  overflow-x: hidden !important;
}

/* 固定导航栏宽度，避免偏移 */
.navbar {
  width: 100vw !important;
  right: 0 !important;
}

/* 修复展开菜单的宽度与位置 */
.navbar-collapse {
  position: relative !important;
  left: 0 !important;
  width: 100% !important;
}

如果导航栏使用fixed-top类，可保留固定定位，仅调整宽度约束即可。

3. 禁用安卓Chrome横向弹性滚动 #

安卓Chrome的弹性滚动效果可能触发页面偏移，通过CSS关闭横向滚动行为：

body {
  overscroll-behavior-x: none;
}

4. 修复导航栏过渡动画冲突 #

部分安卓Chrome版本对Bootstrap默认的导航栏过渡动画存在重绘bug，可临时禁用或调整动画属性：

/* 直接禁用过渡 */
.navbar-collapse {
  transition: none !important;
}

/* 或仅保留高度过渡，避免横向偏移 */
.navbar-collapse {
  transition: height 0.3s ease !important;
  width: 100% !important;
}

5. 重置菜单触发时的位置参数 #

如果有自定义JS控制菜单展开，在点击事件中强制重置导航栏位置：

document.querySelector('.navbar-toggler').addEventListener('click', function() {
  const collapseMenu = document.querySelector('.navbar-collapse');
  collapseMenu.style.left = '0';
  collapseMenu.style.width = '100%';
});

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