Bootstrap 5导航链接Hover下划线异常问题求助

云原生阿岚

2026-7-14

导航栏悬停下划线异常修复方案

问题现象

使用Bootstrap 5搭建的网站导航栏，鼠标悬停时仅“Services”链接能显示与文字宽度匹配的下划线，Home、About等其他链接的下划线会贯穿整个导航栏宽度。

问题原因

Bootstrap默认样式中，.navbar-nav下的普通.nav-link是块级元素（display: block），导致设置width: 100%的伪元素撑满父容器；而带有下拉菜单的.nav-link因下拉组件样式，自动变为行内块级元素（display: inline-block），伪元素宽度会跟随文字内容。

修复方案

给所有.nav-link统一设置display: inline-block，让伪元素宽度匹配文字宽度，同时调整内边距避免下划线紧贴导航栏底部。

修改后的CSS代码

替换原CSS中.nav-link相关的样式：

.nav-link {
    position: relative;
    display: inline-block; /* 核心：让链接宽度跟随文字 */
    padding-bottom: 5px; /* 为下划线预留空间 */
}

.nav-link::after {
    content: '';
    opacity: 0;
    transition: all 0.2s ease;
    height: 2px;
    width: 100%;
    background-color: hsl(18, 100%, 62%);
    position: absolute;
    bottom: 0;
    left: 0;
}

.nav-link:hover::after {
    opacity: 1;
}