模态框触发时页面内容左移问题求助（已查相关问答未解决）

嘿，我碰到过好几次这个问题了！这种页面偏移大多和Bootstrap处理滚动条的机制有关，下面给你梳理几个靠谱的解决方案：

常见触发原因 #

当Bootstrap的Modal弹出时，框架会自动给<body>添加modal-open类，同时设置padding-right来抵消浏览器默认滚动条消失后留下的空白。但如果你的页面有自定义滚动条样式、固定定位元素，或者布局本身依赖滚动条的宽度，就容易出现这种向左偏移的情况。

具体解决方案 #

• 禁用Bootstrap的自动padding调整
  直接覆盖框架的默认行为，阻止它修改body的padding：

  body.modal-open {
    padding-right: 0 !important;
  }
  

  要是页面原本有滚动条，这么做可能会让右侧出现空白，这时候可以手动计算滚动条宽度，给body补上对应的margin/padding来抵消。

• 适配自定义滚动条
  如果你用了自定义滚动条（比如通过::-webkit-scrollbar），Bootstrap可能无法正确计算它的宽度。可以先定义滚动条宽度，再同步调整Modal弹出时的body padding：

  /* 自定义滚动条宽度 */
  ::-webkit-scrollbar {
    width: 16px;
  }
  /* 确保Modal弹出时body的padding和滚动条宽度匹配 */
  body.modal-open {
    padding-right: 16px !important;
  }
  

• 修复固定定位元素的偏移
  页面里的固定导航栏、侧边栏这类position: fixed元素，不会继承body的padding调整，会单独出现偏移。可以给它们也加上对应的padding：

  body.modal-open .navbar-fixed-top,
  body.modal-open .sidebar-fixed {
    padding-right: 16px !important;
  }
  

额外排查小技巧 #

• 确认你的Bootstrap版本是不是最新稳定版，老版本的Modal模块确实存在这类布局bug，升级后可能直接解决问题。
• 检查页面里有没有其他JS代码在修改body的margin、padding或者overflow属性，说不定和Bootstrap的Modal逻辑冲突了。

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