Bootstrap 5 打开模态框时会自动为 添加 modal-open 类及 padding-right，以补偿滚动条消失造成的布局偏移；若页面中存在 position: fixed 的头部、背景等元素未适配该 padding，将发生向右偏移。正确解法是为其添加 .is-fixed 类，交由 Bootstrap 自动管理动态内边距。
bootstrap 5 打开模态框时会自动为 `
` 添加 `modal-open` 类及 `padding-right`，以补偿滚动条消失造成的布局偏移；若页面中存在 `position: fixed` 的头部、背景等元素未适配该 padding，将发生向右偏移。正确解法是为其添加 `.is-fixed` 类，交由 bootstrap 自动管理动态内边距。在使用 Bootstrap 5 构建响应式前端应用（如 Angular 项目）时，一个常见但易被忽视的问题是：模态框（Modal）打开后，固定定位（position: fixed）的导航栏、页眉、全屏背景图等内容意外向右偏移，恰好“吃掉”了原本滚动条所在的空间。这种现象并非 Bug，而是 Bootstrap 5 主动设计的滚动条补偿机制所致。
? 问题根源：滚动条宽度补偿逻辑
当模态框弹出时，Bootstrap 5 的 JavaScript 会：
- 给 添加 modal-open 类；
- 设置 overflow: hidden 防止背景滚动；
- 动态注入 padding-right（通常为 15px–17px），用于填补因禁用滚动条而“消失”的垂直滚动条宽度，避免页面内容发生横向抖动（layout shift）。
该机制对普通流式内容友好，但对 position: fixed 元素无效——因为固定定位元素脱离文档流，其宽度计算默认基于视口（viewport）宽度，不会自动感知 body 新增的 padding-right，从而向右溢出，覆盖原滚动条区域。
✅ 正确解决方案：启用 Bootstrap 的 .is-fixed 自动适配
Bootstrap 5 内置了对固定定位元素的智能 padding 补偿支持，无需手动写 CSS 覆盖或 JS 监听。关键在于：为所有可能偏移的 fixed 元素显式添加 .is-fixed 类。
? 原理说明：Bootstrap 的 scrollbar.js 在模态框显示/隐藏时，会自动查找并为带有以下任一类的元素添加/移除 padding-right：
- .fixed-top
- .fixed-bottom
- .sticky-top
- .is-fixed（无默认样式，纯语义标记类）
因此，.is-fixed 是专为自定义固定元素设计的“钩子类”，安全、轻量、可维护。
? 实践示例
假设你有一个固定在顶部的导航栏和一张全屏固定背景图：
<!-- ❌ 错误：无 .is-fixed → 模态框打开时右移 -->
<nav class="navbar navbar-expand-lg fixed-top bg-dark">
<div class="container">
<a class="navbar-brand" href="#">MyApp</a>
</div>
</nav>
<!-- ❌ 错误：同样会右移 -->
<div class="hero-bg" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #333;"></div>✅ 修正后（推荐）：添加 .is-fixed
<!-- ✅ 正确：Bootstrap 将自动管理 padding -->
<nav class="navbar navbar-expand-lg fixed-top is-fixed bg-dark">
<div class="container">
<a class="navbar-brand" href="#">MyApp</a>
</div>
</nav>
<!-- ✅ 正确：同样生效 -->
<div class="hero-bg is-fixed" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #333;"></div>⚠️ 注意事项：
- 不要尝试用 !important 强制重置 body { padding-right: 0 } 或 overflow-y: scroll —— 这会破坏 Bootstrap 的滚动行为，可能导致模态框内容无法滚动或背景意外滚动；
- 避免给 body 或 html 添加自定义 padding / margin，干扰 Bootstrap 的计算逻辑；
- 若使用 Angular，确保 .is-fixed 类在组件渲染完成后再应用（通常直接写在模板中即可，无需动态操作）；
- 该方案兼容所有 Bootstrap 5.3+ 版本，且对移动端 Safari 等浏览器滚动条宽度差异有良好适配。
? 补充：验证与调试技巧
- 打开浏览器开发者工具，观察模态框触发前后：
- 是否出现 modal-open 及内联 style="padding-right: 17px;"；
- 固定元素是否被动态添加了 style="padding-right: 17px;"（若有，则 .is-fixed 已生效）；
- 如仍偏移，检查是否存在多重固定定位嵌套（如 fixed 内再包 fixed），应仅对最外层容器加 .is-fixed。
通过合理运用 .is-fixed，你既能保留 Bootstrap 的原生滚动控制能力，又能确保 UI 一致性与专业体验——这是官方推荐、经生产环境验证的最佳实践。
