Bootstrap 4+SASS新手求助：无法去除Navbar菜单项上下边距？

云原生阿岚

2026-5-20

嘿，我懂你现在的头疼——Navbar菜单项的边距调整确实是Bootstrap新手容易卡壳的地方，尤其是用SASS自定义变量的场景。结合你已经做的步骤，咱们来一步步搞定这个问题：

1. 优先用Bootstrap内置SASS变量修改（最推荐）

Bootstrap 4本身提供了专门控制Navbar链接内边距的变量，你只需要在_custom-variables.scss里覆盖这些默认值就行，不用写额外的自定义样式：

// 调整菜单项上下内边距（控制垂直方向的空间）
$nav-link-padding-y: 0.8rem;
// 调整菜单项左右内边距（控制水平方向的间隔）
$nav-link-padding-x: 1.5rem;

// 如果需要调整整个Navbar的上下内边距（间接影响菜单项的垂直位置）
$navbar-padding-y: 0.5rem;

关键提醒：一定要把_custom-variables.scss的导入放在Bootstrap核心SASS文件之前，这样你的自定义变量才能覆盖默认值。比如你的_my-theme.scss结构应该是：

@import "custom-variables";
@import "bootstrap";
// 后续自定义样式写在这里

2. 自定义样式微调（变量满足不了需求时）

如果内置变量不够灵活（比如只想调整hover状态的边距，或者特定菜单项），可以在_my-theme.scss里写针对性的CSS/SASS代码，注意选择器的优先级要足够覆盖Bootstrap的默认样式：

// 全局调整所有Navbar菜单项的边距
.navbar-nav .nav-link {
  padding-top: 1rem;
  padding-bottom: 1rem;
  // 如果需要margin的话（比如想让菜单项之间有额外垂直间距）
  margin-top: 0.3rem;
  margin-bottom: 0.3rem;
}

// 只调整hover状态的内边距
.navbar-nav .nav-link:hover {
  padding-left: 1.8rem;
  padding-right: 1.8rem;
}