bootstrap 5模态框触发body padding-right补偿是主动滚动条宽度补偿逻辑，非css冲突；fixed元素需加.is-fixed类同步补偿，否则视觉右偏。
Bootstrap 5 模态框触发 body 的 padding-right 补偿
这不是 CSS 冲突，而是 Bootstrap 5 主动注入的滚动条宽度补偿逻辑。模态框（Modal）打开时，JS 会自动给 添加 modal-open 类，并设置 padding-right: 15px（或类似值），防止因禁用滚动条导致页面内容横向抖动。
问题在于：position: fixed 元素（如导航栏、全屏背景、返回顶部按钮）的定位基准是视口（viewport），不响应 body 的 padding-right；结果就是它们“原地不动”，而其他流式内容被向左挤了 15px，视觉上表现为 fixed 元素向右偏移。
- 该行为在 Bootstrap 5.3+ 中默认启用，无需额外配置
- 偏移量不是固定 15px，而是 JS 动态测量当前滚动条宽度（Windows 常为 17px，macOS 无滚动条则为 0）
- 即使没显式调用
Modal，只要引入了bootstrap.bundle.js且页面含data-bs-toggle="modal"元素，逻辑就已激活
为什么 .fixed-top 或自定义 position: fixed 不自动适配
因为 Bootstrap 默认只管理它自己控制的组件（如 .navbar）的 padding 适配，对用户手写的 position: fixed 元素完全“视而不见”。除非你主动告诉它：“这个元素也要参与滚动条补偿”。
- 正确做法是给对应元素添加
.is-fixed类（注意不是.fixed-top） -
.is-fixed是 Bootstrap 内置类，其作用就是让该元素在modal-open状态下也同步获得padding-right补偿 - 必须加在元素自身上，不能靠父容器继承；多个元素需分别加
- 若使用 Angular/React 等框架，确保类名在 DOM 渲染完成后再存在（避免 SSR 未同步）
手动覆盖或禁用补偿的风险点
有人会直接写 body.modal-open { padding-right: 0 !important; } 来“一劳永逸”，但这会引发新问题：
- 模态框打开时，页面内容横向抖动（layout shift），影响 CLS 核心 Web 指标
- 右侧内容可能被滚动条遮挡（尤其窄屏或 Windows 设备）
- 破坏 Bootstrap 自身下拉菜单、Popover 等组件的 viewport 对齐逻辑
- 后续升级 Bootstrap 版本后，该 hack 可能失效或与新机制冲突
验证和调试建议
打开模态框后，在 DevTools 中检查两个关键点：
- 确认
是否有modal-open类及计算后的padding-right值 - 检查出问题的 fixed 元素是否缺失
.is-fixed类；若有，再看其 computedpadding-right是否同步更新 - 临时删掉
bootstrap.bundle.js（只留 CSS），观察偏移是否消失——可快速判断是 JS 行为还是纯 CSS 覆盖问题
最易被忽略的是：.is-fixed 必须配合 Bootstrap 的 JS 运行时才生效，单独引入 CSS 文件不会触发该逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
