直接调.nav-link的padding大概率没反应，因被bootstrap默认样式覆盖；应使用更具体选择器如.navbar-nav .nav-link、复用px-3等工具类，或响应式控制逻辑。
直接调 .nav-link 的 padding 大概率没反应，因为被 Bootstrap 默认样式覆盖了；真正该用的是更具体的选择器、Bootstrap 自带的间距工具类，或响应式控制逻辑。
为什么给 .nav-link 加 padding 没效果
浏览器开发者工具里能看到你写的 padding 值被划掉——不是代码写错了，是优先级不够。Bootstrap 5.3+ 的默认规则如 .navbar-nav .nav-link 比单独的 .nav-link 更具体，而像 px-3 这类工具类还自带 !important（取决于 $enable-important-utilities 配置）。你手写的 CSS 如果没加 !important 或没提升选择器权重，就会被盖掉。
常见错误操作：
- 只写
.nav-link { padding: 0 1rem; }，没加!important，也没限定作用域 - 在
<style></style>标签里写，但这段 CSS 在 Bootstrap 样式表之前加载 - 用了
px-3却发现小屏下太挤，误以为类失效，其实是断点适配问题
用对工具类比写 CSS 更稳
多数场景下，px-2、px-3、py-2 比自定义 CSS 更可靠：它们已通过所有断点测试，语义明确，且不会因加载顺序错乱失效。
适用情况：
- 左右等距：直接加
px-3到<a class="nav-link px-3"></a> - 移动端热区不足：优先用
py-2或py-3，确保上下内边距 ≥ 0.5rem，配合行高让可触控区域 ≥ 44px - 折叠后菜单项居中：
px-3依然生效，但整体居中要靠.navbar-collapse内的d-flex justify-content-center，不是单靠 padding
别在 .nav-item 上加 mx-2：移动端折叠后它会垂直堆叠，水平 margin 变成顶部/底部空白，破坏体验。
必须写自定义 CSS 的三种情况
当工具类无法满足时，才建议写 CSS，且必须注意作用域和加载顺序：
- 左右 padding 不同：比如
padding-left: 1.25rem; padding-right: 0.75rem; - 响应式差异化：小屏用
px-2，中屏起升到px-4，但 Bootstrap 没提供px-sm-2 px-md-4这种组合 - 项目禁用了
!important工具类，或只引入了精简版 CSS（如仅 navbar 模块）
此时正确写法是：.navbar-nav .nav-link { padding-left: 1.25rem; padding-right: 0.75rem; }，并确保这段 CSS 在 Bootstrap 样式表之后引入。如果仍不生效，再考虑加 !important，但只限具体属性，例如：padding-left: 1.25rem !important;。
移动端折叠菜单的 padding 还管用吗
管用，但得作用在正确元素上。折叠后的菜单由 .navbar-collapse 包裹，其内部的 .nav-link 仍是可点击主体，所以 px-3 或自定义 padding 依然生效。
但要注意两个易漏点：
- 折叠状态下
.navbar-nav默认无额外 margin，如果想让菜单项离顶部有空隙，得手动加mt-2或mb-2到.navbar-nav上 - 小屏下别设
padding-top: 0.25rem这类小值——文字会紧贴上边缘，热区被压缩，手指点按容易误触
最常被忽略的是：没检查 .navbar-collapse 是否被包裹在额外的 <div> 里，导致自定义样式作用域失效；或者忘了在移动端启用 <code>data-bs-toggle="collapse"，JS 没初始化，整个折叠逻辑都挂了。
