bootstrap 5 中仅 .container-fluid 是官方支持的全宽容器，它无 max-width 限制、宽度恒为 100%，但默认含 15px 水平内边距；需搭配 .row 使用栅格，清除内边距应优先用 px-0 而非行内样式，全宽 banner 高度推荐 min-height: 100vh 或 aspect-ratio 以规避 ios safari 的 vh 抖动问题。
Bootstrap 5 默认容器有最大宽度，.container-fluid 才是真全宽
Bootstrap 的 .container 类默认带左右内边距和响应式最大宽度（如 lg 断点下是 992px），根本不是“全屏”。要真正铺满视口宽度，必须用 .container-fluid —— 它只设 padding-left/right: 15px，无 max-width 限制。
常见错误是直接给 .container 加 class="w-100" 或写 style="width: 100vw"，结果要么被父容器 padding 截断，要么触发横向滚动条。
-
.container-fluid是唯一官方支持的全宽容器类，适用于 Banner、全宽背景区块、地图嵌入等场景 - 它在所有断点下都保持
width: 100%，但保留默认15px水平内边距（可手动覆盖） - 如果项目用了 Bootstrap 4，同样适用；但注意 v4 中
.container-fluid的 padding 行为与 v5 一致，无需额外 hack
去掉默认 15px 水平内边距的两种安全方式
很多设计稿要求“像素级贴边”，此时 .container-fluid 自带的 15px 左右内边距就成了干扰。不能直接删 padding，否则破坏栅格系统对齐——得用更可控的方式。
推荐以下两种：
- 加
class="px-0"：利用 Bootstrap 内置间距工具类，精准清除水平 padding，不影响其他方向 - 自定义 class（如
.full-bleed）配padding-inline: 0 !important：适合需要复用或跨组件统一处理的场景；注意加!important是因为 Bootstrap 的 padding 工具类优先级高 - 避免用
style="padding: 0"写在 HTML 里：难维护，且容易漏掉padding-inline-start/end在 RTL 布局下的兼容问题
全宽区域里用栅格仍需包裹 .row，否则列会溢出
即使用了 .container-fluid.px-0，内部若直接放 .col，它们会继承父容器的负 margin 行为缺失，导致列宽度计算异常、换行错乱，甚至内容撑破视口。
正确结构必须是：.container-fluid → .row → .col。因为 .row 提供了 margin-inline: -15px 来抵消容器的 padding，这是 Bootstrap 栅格对齐的基础机制。
- 错误写法：
<div class="container-fluid px-0"><div class="col-12">内容</div></div> - 正确写法：
<div class="container-fluid px-0"><div class="row"><div class="col-12">内容</div></div></div> - 如果只是单个全宽区块、不用栅格布局，其实可以不用
.row，但一旦涉及多列、响应式分栏，.row就不可跳过
全宽 + 固定高度容器慎用 vh 单位，移动端 Safari 有兼容问题
很多人想让全宽 Banner 高度占满屏幕，就写 style="height: 100vh"。但在 iOS Safari 中，地址栏收放会动态改变 vh 实际值，导致内容突然跳动或截断。
更稳的替代方案：
- 用
min-height: 100vh而非height: 100vh：允许内容自然撑高，规避 Safari 的 vh 抖动 - 配合
aspect-ratio控制比例（现代浏览器支持良好），比如style="aspect-ratio: 16/9"，比硬写vh更可靠 - 如必须精确控制高度，建议用 JS 动态读取
window.innerHeight并设为内联样式，再监听resize更新（注意防抖）
全宽本身不复杂，但和高度、栅格、移动端适配一叠加，细节就藏在 .row 是否存在、px-0 是否生效、vh 是否被 Safari 误判这些地方。漏掉任意一个，视觉就可能偏移几像素，或者整个区块在 iPhone 上闪一下。
