最安全的做法是使用 px-0 类，它仅清除左右内边距，保留上下 padding 和居中逻辑；误用 g-0（仅对 .row 有效）、p-0（会清除全部内边距）或手动设 padding: 0 均会破坏响应式行为。
直接用 px-0 类最安全，别碰 p-0 或 g-0
Bootstrap 5 的 .container 在 sm（≥576px）及以上断点默认有左右各 15px 内边距，px-0 是专为此设计的工具类——它只清除 padding-left 和 padding-right，不碰上下，也不影响居中逻辑。
常见错误包括：
• 给 .container 加 g-0：该类只对 .row 生效，加在容器上完全无效
• 用 p-0：会把顶部和底部 padding 也清掉，可能让导航栏塌陷或内容紧贴 .navbar
• 手动写 padding: 0：破坏响应式断点行为，小屏也会丢掉呼吸空间
需要按屏幕尺寸控制？用带断点前缀的 px-{breakpoint}-0
比如想只在大屏（≥992px）去掉左右内边距，保留中屏和手机端的默认留白，就写 px-lg-0；若要从平板开始（≥768px）清零，用 px-md-0。
注意几个关键点：
• px-sm-0 在 xs（• 不要混用 px-0 和 px-md-0：后者权重更高，会覆盖前者
• px-xxl-0 默认不生效，除非你启用了 xxl 断点（需改 SCSS 配置）
为什么不能靠改 $container-padding-x 变量实现响应式控制
$container-padding-x 是 SCSS 变量，只接受单个数值（如 0.75rem），编译后生成的是全局统一的 padding 值，**不会自动产出媒体查询**。它无法实现“小屏有边距、大屏无边距”这种条件逻辑。
常见踩坑：
• 在普通 CSS 文件里写 $container-padding-x: 0; → 浏览器直接报错或忽略
• 修改了 node_modules/bootstrap/scss/_variables.scss 却没运行 sass 编译 → 修改根本没进输出文件
• CDN 用户试图覆盖该变量 → 完全无效，因为 CSS 已静态打包好
真要彻底清空？结构比补丁更可靠
如果某区块（比如全宽 banner、Canvas 动画、第三方嵌入）必须严格贴边，与其反复给 .container 打补丁，不如换结构：
• 删掉 .container，用语义化 wrapper（如 <section class="hero">），自己控制 width 和 padding
• 把 .row 直接放 body 下：它的负 margin 本就是为抵消容器 padding 设计的，没 .container 反而更干净
• 避免 !important 强制归零：它会让后续响应式类（如 px-md-3）失效，调试时你会在 DevTools 里反复看到“被覆盖却查不到来源”
立即学习“前端免费学习笔记（深入）”；
