Bootstrap 4导航栏链接hover背景高度问题技术求助

这个问题其实是Bootstrap 4默认样式导致的：默认的.nav-link自带上下内边距，而且导航项没有完全撑满导航栏的高度，所以hover时背景只覆盖链接自身的小区域，没法铺满整个导航栏高度。下面给你一套直接可行的解决方案：

调整导航栏的布局与样式 #

我们需要让导航项和链接完全撑满导航栏高度，同时保证文字垂直居中，这样hover背景就能自然铺满整个高度。把你的导航栏CSS替换成下面的代码：

/* 全局链接样式（保留你原有设置） */
a, a:visited, a:hover, a:active { 
  color: inherit; 
}

/* Navigation Bar */
.navbar { 
  background-color: #303030;
  /* 可选：如果需要固定导航栏高度，这里可以设置min-height，比如min-height: 60px; */
}

.navbar-nav {
  /* 让每个导航项自动拉伸到导航栏的高度 */
  align-items: stretch;
}

.navbar-nav .nav-item {
  /* 确保导航项完全继承导航栏的高度 */
  height: 100%;
}

.navbar-nav .nav-link {
  color: #ffffff;
  text-align: center;
  /* 让链接占满导航项的高度和宽度 */
  height: 100%;
  width: 100%;
  /* 用flex布局让文字垂直居中 */
  display: flex;
  align-items: center;
  /* 调整左右内边距，控制链接的水平点击范围 */
  padding: 0 1rem;
}

/* 设置hover状态的背景色，这里可以换成你想要的颜色 */
.navbar-nav .nav-link:hover {
  background-color: rgba(255,255,255,0.1);
}

原理说明 #

• align-items: stretch 让.navbar-nav下的所有.nav-item自动拉伸到和导航栏一致的高度
• .nav-item设置height: 100% 确保它完全贴合导航栏的高度
• .nav-link用flex布局+align-items: center 保证文字垂直居中，同时height: 100%让链接区域铺满整个导航项高度，hover时背景自然就覆盖了整个导航栏高度

如果你的导航栏有自定义高度，只需要给.navbar设置min-height，上面的样式依然能正常生效。

内容的提问来源于stack exchange，提问作者Mitch