Bootstrap 5.3+ 工具类自带 !important 且权重高，自定义样式需加 !important、提升特异性（如 .card .my-px-3）或修改 CSS 变量 --bs-spacer 才能覆盖。
不是你的自定义样式写错了，而是 Bootstrap 5 的间距工具类（如 px-3、mt-4）本身带 !important，且选择器权重高——你写的 .my-p-2 单独出现，根本赢不了。
为什么 px-3 能压过你的 .my-padding
Bootstrap 5.3+ 默认给绝大多数工具类加了 !important，比如：.px-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
而你没加 !important，浏览器直接判负。即使你把 CSS 文件放在 bootstrap.min.css 后面加载，也救不回权重劣势。
- 打开 DevTools → Elements 面板，选中元素，看 Styles 里哪条
padding被划掉；如果来源是bootstrap.min.css，说明你的规则连参与层叠的资格都没有 - 别只查“有没有生效”，要查“为什么被划掉”——是权重低？还是
!important输了？或是属性根本没匹配上？ - 用
.card .my-px-3这种组合选择器，把特异性从0,1,0,0提到0,2,0,0，就能和.px-3正面刚
想覆盖 px-md-4，不能只写 @media (min-width: 768px)
Bootstrap 的响应式类（如 px-md-4）不只是媒体查询，还依赖内部变量和编译时生成的规则。你手动写 @media (min-width: 768px) { .my-px-md-4 { ... } } 很可能漏掉断点顺序或变量上下文，导致小屏/大屏行为错乱。
- 确认项目实际用的是 Bootstrap 5 —— 它的
md断点是≥768px；如果是 Bootstrap 4，sm是≥576px，硬抄会错配 - 纯 CSS 场景下，必须严格按 Bootstrap 的断点顺序写媒体查询：
@media (min-width: 576px)→@media (min-width: 768px)→@media (min-width: 992px)，否则会被后加载的规则覆盖 - 更稳的做法：复用 Bootstrap 的 SCSS 变量，在自定义 SCSS 中用
@each $breakpoint, $value in $grid-breakpoints生成，避免硬编码像素值
用 --bs-spacer 改全局间距，但别碰 --bs-spacers
--bs-spacer 是唯一可在运行时安全修改的间距基础变量，它会影响所有 m*/p* 工具类的计算基数（比如 mt-3 = calc(--bs-spacer * 3)）。而 --bs-spacers 是 Sass map，纯 CSS 无法赋值，写了也无效。
立即学习“前端免费学习笔记（深入）”；
- 在
:root里改：:root { --bs-spacer: 0.375rem; }，所有mx-1、pb-5会自动放大 1.5 倍 - 设为
0.125rem会让布局更紧凑，但设为0或负值会导致mx-auto等逻辑失效 - 这个改动不会影响
gx-*、gy-*—— 它们走的是另一套变量--bs-gutter-x，需单独处理
真正容易被忽略的，是间距类之间会叠加而非替换：同时写 px-2 my-px-3，左右内边距是两套规则相加的结果，不是你预想的“后者覆盖前者”。想替代，就得确保自定义规则能压过原生类——要么提权，要么加 !important，要么动变量源头。没有银弹，只有匹配场景的选择。
