在 Bootstrap 5 中，通过组合使用 container-fluid、p-0 和 m-0 等工具类，可轻松将任意嵌套容器（如 #inner）扩展至视口全宽，同时保持内容居中与响应式行为。
在 bootstrap 5 中，通过组合使用 `container-fluid`、`p-0` 和 `m-0` 等工具类，可轻松将任意嵌套容器（如 `#inner`）扩展至视口全宽，同时保持内容居中与响应式行为。
在 Bootstrap 5 中，container 类默认添加了水平内边距（padding）和最大宽度约束（如 max-width: 1140px），这正是导致 #inner 无法铺满全屏的根本原因。要实现真正的全宽效果，关键在于移除所有限制性样式，并确保父容器本身具备流式宽度能力。
✅ 正确做法：两层 container-fluid + 零边距/边框控制
- 将外层容器 #outer 改为 container-fluid，并添加 p-0 m-0 消除默认 padding/margin；
- 将内层 #inner 同样设为 container-fluid（确保其宽度继承父级 100% 视口宽度），再用 m-0 清除上下外边距（避免 my-5 干扰），保留 p-5 可维持内部留白；
- 若需垂直间距（如原 my-5），建议改用 pt-5 pb-5 或单独包裹一个带 my-5 的空 div，避免影响全宽逻辑。
以下是优化后的 HTML 片段（精简关键部分）：
<div class="container-fluid p-0 m-0" id="outer">
<div class="container-fluid p-5 m-0 text-center bg-body-tertiary rounded-3" id="inner">
<!-- 内容保持不变 -->
<h1 class="text-body-emphasis">Jumbotron with icon</h1>
<p class="col-lg-8 mx-auto fs-5 text-muted">
This is a custom jumbotron featuring an SVG image...
</p>
<!-- 按钮等 -->
</div>
</div>
⚠️ 注意事项：
- 不要混用 container 和 container-fluid 在同一嵌套链中——它们的宽度策略冲突；
- mx-auto 仍可安全使用于内部文本或按钮组，因为 container-fluid 提供的是 100% 宽度容器，mx-auto 仅居中其子元素，不影响全宽目标；
- 如需调试布局，可临时添加 border 辅助线（如 style="border: 1px solid red"），验证实际渲染范围；
- 若项目中全局重置了 body 或 html margin/padding，请确保未意外覆盖 Bootstrap 默认重置逻辑。
最终效果：#inner 将严格占据整个视口宽度（减去 p-5 内边距），内容居中、响应式断点正常生效，且完全兼容 Bootstrap 5 的栅格系统与工具类体系。
