直接写 .my-p-3 在小屏下没反应，因为该类无断点前缀且未注入媒体查询规则，无法响应屏幕尺寸变化；同时Bootstrap工具类权重高（含!important），自定义类若未提升选择器特异性或未加!important则被覆盖。
为什么直接写 .my-p-3 在小屏下没反应
因为 Bootstrap 的响应式间距类（如 px-md-4）依赖媒体查询 + 高权重选择器，你写的单个类名 .my-p-3 没带断点前缀，也不会被自动注入媒体规则。浏览器只把它当普通类处理，不会随屏幕尺寸变化。
- 检查 DevTools 的「Computed」面板：如果
padding值被划掉，说明被.px-md-4或其他工具类覆盖了 - Bootstrap v5.3+ 默认给多数工具类加了
!important，你没加就大概率赢不了权重 - 别用
@media (min-width: 768px)硬抄——先确认项目用的是不是 Bootstrap 5，它的md断点确实是 ≥768px；如果是 Bootstrap 4，md是 ≥768px，但sm是 ≥576px，容易错配
px-sm-2 和自定义类混用时 padding 叠加出问题
根本原因是 px-sm-2 控制的是元素自身左右内边距，而你写的自定义类如果也作用于同一元素，两者会叠加，不是“替换”关系。
- 比如同时写
class="px-sm-2 my-custom-px"，小屏下实际 padding-left/right 是两套规则相加的结果 - 想替代而非叠加，就得确保自定义类的 CSS 规则能压过 Bootstrap 工具类：用更具体的选择器，例如
.card-body .my-px-sm-2而不是.my-px-sm-2 - 如果必须用
!important，只加在需要覆盖的属性上，比如padding-left: 0.5rem !important;，别整条声明都上
如何让自定义类支持响应式断点（如 my-px-md-3）
纯 CSS 写不了真正的响应式类名，除非你手动为每个断点写一遍媒体查询。但可以复用 Bootstrap 的断点逻辑，避免硬编码像素值。
- 查
node_modules/bootstrap/scss/_variables.scss里的$grid-breakpoints，抄它的键值对（如sm: 576px），别自己写@media (min-width: 576px) - 推荐写法（SCSS）：
@each $breakpoint, $value in $grid-breakpoints { @include media-breakpoint-up($breakpoint) { .my-px-#{$breakpoint}-3 { padding-left: 1rem !important; padding-right: 1rem !important; } } } - 如果只用纯 CSS，就老老实实写三段：
@media (min-width: 576px)、@media (min-width: 768px)、@media (min-width: 992px)，并确保顺序和 Bootstrap 一致
:root 里改 --bs-spacer 影响所有工具类，但不等于改了你的自定义类
这是最容易忽略的一点：修改 --bs-spacer 只会让 m-1、p-4 这类系统类重新计算，对 .my-p-2 这种手写类完全没影响。
立即学习“前端免费学习笔记（深入）”；
-
:root { --bs-spacer: 0.375rem; }→p-3会变成padding: 1.125rem，但.my-p-3还是按你写的固定值（比如12px）生效 - 如果你希望自定义类也跟着缩放，得手动用
calc(var(--bs-spacer) * 3)，但注意：Bootstrap 的--bs-spacersmap 不可运行时读取，只能靠--bs-spacer基础单位 - 别设
--bs-spacer: 0或负值——会导致mx-auto等依赖 margin 计算的类失效
