如何让Bootstrap 4导航菜单项元素与导航栏等高（仅CSS方案）

1. 消除悬停时的蓝色闪烁偏移 #

Bootstrap默认导航链接在聚焦、激活状态下自带outline或阴影效果，再加上内边距的过渡动画，就会出现你说的蓝色闪烁偏移。直接重置这些样式即可：

/* 移除焦点状态的蓝色高亮和阴影 */
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link:active {
  outline: none;
  box-shadow: none;
}

/* 取消默认过渡动画，统一上下内边距避免悬停时位置跳变 */
.navbar-nav .nav-link {
  transition: none;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

2. 让橙色悬停元素与导航栏完全等高 #

别直接给导航链接加背景，用伪元素实现橙色背景能轻松突破内边距限制，撑满整个导航栏高度：

/* 清除导航栏默认内边距，避免高度冗余 */
.navbar {
  min-height: 56px; /* Bootstrap 4默认导航栏高度，按需调整即可 */
  padding: 0;
}

/* 给导航链接设置相对定位，为伪元素提供参照 */
.navbar-nav .nav-link {
  position: relative;
  z-index: 1; /* 保证文字显示在橙色背景上方 */
  padding-left: 1rem;
  padding-right: 1rem;
}

/* 用伪元素生成橙色悬停背景，完全覆盖导航栏高度 */
.navbar-nav .nav-link:hover::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ff7f00; /* 替换为你需要的橙色值 */
  z-index: -1; /* 将背景压在文字下方 */
}

如果你的导航栏不是默认56px高度，直接调整.navbar的min-height数值就行，所有样式都无需修改HTML结构，完全符合你的需求。

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