抖动不是 bug，是 bootstrap 5+ 主动添加 padding-right 补偿滚动条消失所致：模态框打开时 body 增加 modal-open 类并动态设置 padding-right（如 17px），但 fixed 元素未同步补偿，导致视觉左缩；解决方式为给 fixed 元素添加 .is-fixed 类或使用 data-bs-backdrop="static" 禁用补偿。

抖动不是 Bug，是 Bootstrap 5+ 主动加的 padding-right 补偿逻辑在起作用——它想填平滚动条消失造成的宽度缺口，但只动了 body，没管 position: fixed 元素，也没考虑你用的第三方滚动库或自定义 CSS。

为什么 modal-open 会加 padding-right？

Bootstrap 5+ 在模态框显示时，给 body 加 modal-open 类，并内联设置 padding-right（比如 17px），用来抵消 overflow: hidden 导致的原生滚动条消失。这个宽度不是写死的，而是通过 document.body.offsetWidth - document.documentElement.clientWidth 动态算出来的。

但它只改 body 的 padding，不碰任何 fixed 元素——所以你的顶部导航栏、侧边栏、全屏背景图就会“漏掉补偿”，视觉上向左一缩，就是你看到的抖动。

fixed 元素错位：加 .is-fixed 类就解决

Bootstrap 内置了对 position: fixed 元素的补偿支持，但前提是显式加 .is-fixed 类：

• <nav class="navbar fixed-top is-fixed"></nav>
• <div class="hero-bg is-fixed" style="background-image: url(...) "> <p>这个类本身无样式，只是个钩子。Bootstrap JS 会监听 <code>modal-open 状态，自动为带 .is-fixed 的元素同步增减 padding-right，保持视觉对齐。

  不加这个类，就得自己监听 show.bs.modal / hidden.bs.modal 手动同步，容易漏掉、重复执行，或者在嵌套 modal 场景下失效。

  

  VPS Bootstrap

  从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

  下载

  padding-right 被覆盖或计算错误的常见表现

  你看到的抖动，往往不是没加 padding-right，而是它被干掉了或算错了：

  • 全局 CSS 里写了 body { padding-right: 0 !important; }，直接覆盖了 Bootstrap 的补偿值
  • 用了 overflow-y: overlay 或 scrollbar-gutter: stable，导致 document.body.offsetWidth - document.documentElement.clientWidth 返回 0，Bootstrap 拿不到真实滚动条宽度
  • 用了 perfect-scrollbar 或 overlay-scrollbars 这类接管原生滚动的库，但 Bootstrap 的检测逻辑仍查原生 DOM，结果补了个 0px
  • 模态框嵌套在某个 overflow: hidden 的父容器里，body 的 padding-right 实际没生效区域

  不想用 padding 补偿？用 data-bs-backdrop="static"

  这是最干净的绕过方式：禁用点击遮罩关闭 + 跳过滚动条宽度检测 + 不触发 padding-right 注入。背景仍不可滚（overflow: hidden 由 JS 直接设），但不再抖。

  单模态场景下，直接在 modal 标签加属性：

  <div class="modal" data-bs-backdrop="static">
  <p>需要 ESC 关闭？没问题，<code>data-bs-backdrop="static"</code> 不影响键盘行为。但注意：关闭它不会自动恢复背景滚动，得手动检查 <code>$('.modal.show').length</code> 并控制 <code>body</code> 的 <code>overflow</code> 和 <code>padding-right</code>。</p>
  <p>别暴力写 <code>.modal-open { padding-right: 0 !important; }</code>——这会让 <code>body</code> 在 modal 关闭后仍残留 <code>modal-open</code> 类，后续页面滚动错位。</p>
  <p>真正麻烦的从来不是加不加 <code>padding-right</code>，而是它该加多少、加给谁、什么时候撤——尤其是当页面里混着 fixed 布局、第三方滚动库、移动端 Safari 隐藏滚动条、甚至 <code>zoom</code> 缩放时，硬编码或简单覆盖只会让问题更隐蔽。</p>
  </div>