鼠标悬停导航栏链接时如何让填充高度占满导航栏

针对你遇到的导航栏链接悬停时背景无法完全占满导航栏高度的问题，核心原因是Bootstrap默认的.navbar和.nav-link带有上下内边距，导致悬停区域无法覆盖整个导航栏高度。可以通过以下CSS修改解决：

具体修改步骤 #

1. 移除导航栏默认的上下内边距，消除顶部和底部的留白：

nav.navbar {
    background-color: #8080ff;
    margin: 0;
    position: absolute;
    /* 去掉Bootstrap自带的上下内边距 */
    padding-top: 0;
    padding-bottom: 0;
}

2. 让导航项和链接元素撑满导航栏高度，同时保证文字垂直居中：

.navbar-nav, .nav-item {
    height: 100%;
}

.nav-link {
    /* 设置上下内边距，让链接区域完全覆盖导航栏高度 */
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    height: 100%;
    /* 确保文字在垂直方向居中显示 */
    display: flex;
    align-items: center;
}

3. 自定义悬停背景样式（可根据需求调整颜色）：

.nav-link:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

完整修改后的CSS代码 #

html {
  position: relative;
  min-height: 100%;
  margin: 0;
}

body {
  background-color: #cccccc;
  margin: 0;
  /*margin-bottom: 60px;*/
}

nav.navbar {
    background-color: #8080ff;
    margin: 0px;
    position: absolute;
    padding-top: 0;
    padding-bottom: 0;
}

.navbar-nav, .nav-item {
    height: 100%;
    margin: 0;
}

.nav-link {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    height: 100%;
    display: flex;
    align-items: center;
}

.nav-link:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

修改完成后，鼠标悬停导航链接时，背景填充就能完全覆盖导航栏的高度了。

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