Bootstrap 5 的 px-{breakpoint}-0 工具类（如 px-sm-0、px-md-0）仅在对应断点及更宽视口生效，小屏保留默认 padding；需避免混用 px-0 与响应式类，推荐用 px-0 px-md-3 等层叠写法实现反向逻辑，CDN 项目无法通过 Sass 变量修改。
用 px-{breakpoint}-0 工具类最直接
Bootstrap 5 的 px-* 工具类原生支持响应式断点，px-sm-0、px-md-0 这类写法会只在对应断点及以上生效，小屏仍保留默认 padding。
比如你只想让中屏（≥768px）开始去掉左右内边距，而手机端保持 15px 呼吸空间：
<div class="container px-sm-0"> <p>内容</p> </div>
注意几点：
-
px-sm-0表示从sm断点（768px）起生效，xs下不加该类 → 默认 padding 仍在 - 不要混用
px-0和px-md-0，后者会覆盖前者（CSS 层叠顺序） - 如果用了
px-lg-0却发现小屏也有空隙，不是 bug，是预期行为——它本就不该管小屏
为什么不能只写 @media 覆盖 .container？
手动写媒体查询重置 .container 的 padding 看似自由，但容易漏掉细节：
- Bootstrap 5 的
.container在所有断点下 padding 是统一的（默认 15px），但如果你项目里引入了自定义断点或主题，某些变体（如.container-xl）可能被额外设了 padding - 更关键的是：你写的
@media (min-width: 992px) { .container { padding-left: 0; } }只清了左，右没清，或者忘了padding-right - DevTools 里看着生效，切到平板尺寸刷新后又回来——大概率是媒体查询范围没对上，或加载顺序压不过 Bootstrap 自带样式
验证是否生效？打开浏览器开发者工具，选中容器元素，看 Computed 面板里的 padding-left 和 padding-right 实际值，别信“Styles”标签页里划掉的那行。
想小屏无 padding、大屏反而有？反向逻辑要小心
Bootstrap 工具类没有 “仅在 xs 下生效” 的写法（px-xs-0 不存在），所以如果需求是「手机端贴边、桌面端留白」，得换思路：
- 先全局去掉默认 padding：
px-0 - 再针对大屏加回来：
px-md-3或px-lg-4
<div class="container px-0 px-md-3"> <p>手机端 0，≥768px 时左右各 1rem</p> </div>
这种写法依赖 CSS 层叠，px-md-3 会覆盖 px-0，前提是它写在后面（HTML class 顺序即层叠顺序）。
别指望靠 !important 强行逆转——它会让后续调试变得不可预测，尤其当你用 Sass 编译时，变量优先级更难控制。
SCSS 变量方案只适合源码编译项目
如果你用的是 Bootstrap 源码（npm + Sass），且全站容器都要统一调整，改 $container-padding-x 是最干净的方式：
- 必须在导入 Bootstrap 主文件前定义，例如：
$container-padding-x: 0; // 全局设为 0 @import "bootstrap/scss/functions";
- 它不会影响
.container-fluid（该类默认自带padding: 0） - CDN 项目完全无法走这条路，写了也编译不了
真正容易被忽略的是：改完变量后，必须重新构建 CSS 文件；否则浏览器里看到的还是旧样式。很多开发者卡在这一步，反复检查 class 名和媒体查询，却没意识到本地 CSS 根本没更新。
