如何解决Bootstrap 5导航栏选中菜单项下划线效果不生效的问题

你的样式未生效主要有两个核心问题：

1. 伪类绑定对象错误：:focus 是可交互元素的聚焦伪类，应该绑定在 .nav-link 而非父级 .nav-item 上，而且 :focus 仅在元素处于聚焦状态时生效，失去焦点后样式就会消失，无法用来标识「当前选中」的常驻状态。
2. 样式优先级不足：Bootstrap 5 本身会给当前选中的导航项默认添加 .active 类，默认样式优先级高于你写的选择器，所以自定义样式会被覆盖。

正确实现方案 #

1. 基础CSS样式（必写）

直接针对 Bootstrap 自带的 .active 类编写自定义样式，调整选择器权重覆盖默认规则：

/* 选择器权重足够覆盖Bootstrap默认导航样式 */
.navbar-nav .nav-link.active {
    text-decoration: underline;
    text-underline-offset: 4px; /* 可选：调整下划线与文字的间距，提升美观度 */
    background-color: yellow;
}

如果仍存在样式被覆盖的情况，可以给导航栏添加自定义ID（比如 id="mainNav"），通过提升选择器权重解决：

#mainNav .nav-link.active {
    text-decoration: underline;
    background-color: yellow;
}

2. 动态切换选中状态（单页/动态导航场景需加）

如果是单页应用或者点击导航不需要跳转页面的场景，额外添加JS逻辑实现选中状态自动切换：

const allNavLinks = document.querySelectorAll('.navbar-nav .nav-link');
allNavLinks.forEach(link => {
  link.addEventListener('click', function() {
    // 移除所有导航项的选中状态
    allNavLinks.forEach(item => item.classList.remove('active'));
    // 给当前点击的导航项添加选中状态
    this.classList.add('active');
  });
});

如果是多页静态站点，手动给对应页面的导航项添加 .active 类即可生效，不需要额外加JS。

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