pt-3 在 iPad 竖屏下没生效，是因为它仅作用于 xs 断点（min-width: 0），而 iPad 竖屏宽度为 768px，属于 md 断点范围，该规则根本未被匹配，浏览器中显示为“不适用”；正确写法应为 pt-md-3 才能从 768px 起生效并向上继承。
为什么 pt-3 在 iPad 竖屏下没生效？
因为 pt-3 只作用于 xs 断点（min-width: 0），而 iPad 竖屏宽度通常是 768px，落在 Bootstrap 5 的 md 断点范围内，该类根本不会被匹配。浏览器开发者工具里能看到这个规则被标记为“不适用”（inactive），不是失效，是压根没加载。
正确写法必须带断点前缀：pt-md-3 才能从 768px 起生效，且向上继承（md、lg、xl、xxl 都保持）；pt-lg-2 则只在 ≥992px 生效，小屏回退到无样式（除非你另外写了更小断点的类）。
- 别依赖“没前缀就全局生效”的错觉——Bootstrap 5 没这回事
- 断点顺序是递进的：
pt-sm-1 pt-md-3 pt-lg-0表示：≥576px 用 0.25rem，≥768px 用 1rem，≥992px 清零 - 如果只写
pt-3又同时写了pt-md-0，大屏上会因后者权重相同、位置靠后而覆盖前者
g-3 和 px-3 控制列间距时的区别在哪？
这是最容易混淆的两类间距控制：g-* 是网格系统原生的 gutter 工具类，专用于 .row 元素；px-* 是通用间距类，直接作用于任意元素的 padding。
对列（.col）之间加水平间距，必须用 g-*：它通过 .row { margin-left: -X; margin-right: -X } + .col { padding-left: X; padding-right: X } 协同实现“视觉间隙”，语义准确、响应式内置、不破坏 flex 布局流。
-
g-0移除所有列间水平间距（移动端常用） -
g-md-3表示 ≥768px 启用中等 gutter，小屏仍为默认（或g-0） - 若错误地给
.col加px-3，会导致列宽超 12 栅格（如两个col-md-6 px-3实际占满 + 两边各 1rem），flex 换行或溢出
为什么自定义 @media 写的 padding 总是被划掉？
Bootstrap 5.3+ 默认启用了 $enable-important-utilities: true，所以像 p-4 这类工具类生成的 CSS 规则自带 !important，你的普通媒体查询规则优先级不够，直接被覆盖。
打开浏览器开发者工具，在 Styles 面板里看到你的 padding 值被 strikethrough，基本就是这个原因。
- 最稳妥方案：复用 Bootstrap 自带类，比如改用
p-md-4 p-xl-5，而非手写@media (min-width: 1200px) { .x { padding: 1.25rem; } } - 若必须手写，用更具体的选择器，例如
.my-section > .content { padding: 1rem; } - 真要加
!important，只加在单个属性上：padding-top: 0.5rem !important;，别整块声明都上
内边距大小值 0–5 对应的实际像素怎么算？
Bootstrap 5 默认 $spacer: 1rem（即 16px），所有间距类基于它的倍数：p-0 → 0rem，p-1 → 0.25rem（4px），p-2 → 0.5rem（8px），p-3 → 1rem（16px），p-4 → 1.5rem（24px），p-5 → 3rem（48px）。这不是固定死的，而是由 Sass 变量 $spacers 映射而来。
移动端慎用 p-1 或 p-0 做内容区顶部/底部留白——4px 的 padding-top 会让文字紧贴容器上边框，手指点击热区不足 44px，易误触或难操作。
- 触摸友好底线：移动端上下内边距建议 ≥
p-2（8px），理想是p-3（16px）起 - 如果项目需统一调整所有间距比例，应在 Sass 中重定义
$spacers，而不是到处加!important覆盖 -
p-auto不存在，只有m-auto（居中用），ms-auto是合法的（替代废弃的ml-auto）
实际项目里，最常被忽略的是断点继承逻辑和 gutter 机制的底层协作——它们不是“可选项”，而是 Bootstrap 5 响应式布局的执行前提。写错一个前缀或混用 g- 与 p-，往往要花半小时在开发者工具里逐层排查。
