直接修改 .navbar 的 padding 是最直接有效的方式，但必须同步调整响应式断点下的值和 .nav-link 的上下内边距，否则移动端会出现高度异常、文字贴边、折叠菜单截断及点击热区不足等问题。
.navbar 的 padding 就够了，但必须同步处理响应式断点和 .nav-link 的内边距——否则桌面看着正常，手机上会变矮、文字贴边、折叠菜单被截断。
改 .navbar 的 padding 是最直接的方式
Bootstrap 5 不设固定 height，视觉高度完全靠 padding-top 和 padding-bottom 撑起来。写死 min-height 或 height 反而会破坏折叠逻辑，尤其在移动端。
-
.navbar { padding: 0.75rem 1rem; }是桌面常用起点（上下 0.75rem，左右 1rem） - 别漏掉响应式重置：如果用了
.navbar-expand-lg，必须补上@media (max-width: 991.98px) { .navbar { padding: 0.5rem 1rem; } }——小数点后两位是 Safari 兼容必需写法，写成992px或991px都会失效 - 用 DevTools 的 Computed 面板验证不同断点下真实生效的值，别只看 Styles 面板里有没有声明
.nav-link 的 padding 才决定移动端点击热区高度
折叠菜单展开后，每项高度和可触控区域大小几乎全由 .nav-link 的上下内边距决定。只调 .navbar 的 padding，对折叠态没多大用。
- 小屏下优先用
py-2（上下各 0.5rem）或py-3（0.75rem），确保热区高度 ≥ 44px - 避免只加
padding-left不加padding-right，否则悬停/激活状态高亮不对称 - 如果链接含图标或文字换行，
py-2可能不够，观察是否文字贴顶或压底；此时可微调为padding: 0.375rem 1rem; - 别给
.nav-item加margin来“模拟”间距——折叠后它垂直堆叠，水平 margin 会变成顶部空白
用工具类还是手写 CSS？看场景选
多数情况推荐 Bootstrap 自带的间距类，它们已通过所有断点测试，且加载顺序无关痛痒；只有特定需求才写自定义 CSS。
- 快速生效：直接加
px-3 py-2到<a class="nav-link"></a>上，比手写规则更稳 - 需要非标准值（比如左 1.25rem、右 0.75rem）或断点组合（如
px-sm-2 px-md-4）时，才写 CSS：.navbar-nav .nav-link { padding-left: 1.25rem; padding-right: 0.75rem; } - 手写 CSS 必须放在
bootstrap.min.css之后引入，否则大概率被覆盖；不要依赖!important，它会让后续维护变脆弱 - 若用 Sass 项目，检查是否启用了
$enable-important-utilities: true，关掉它可减少工具类与自定义规则的冲突
.navbar 的 padding，却没动 .nav-link 的 py-*，结果折叠菜单展开后每项高度还是默认的 36px 左右，手指点不准、文字挤在一起——这问题在真机竖屏下才明显，模拟器横屏根本看不出来。
