引导程序5下划线导航栏菜单项

Question

我正试图让导航栏中当前选定的菜单加下划线，但它不起作用。

我的代码：

.navbar-nav .nav-item:focus .nav-link {
text-decoration: underline;
background-color: yellow;
}

将所选菜单链接下划线或以某种方式突出显示似乎很常见，但我不知道如何使用Bootstrap 5实现这一点。

Answer 1

您应该在.nav链接元素上应用pesudo类:focus

.navbar-nav .nav-item .nav-link:focus {
text-decoration: underline;
background-color: yellow;
}

Answer 2

您的css不受影响的原因是因为.nav-item从不集中注意力。。

如果你想让它集中注意力，可以使用tabindex。

否则，将其更改为.nav-link:focus {text-decoration: underline;}(甚至不需要!important(。

Answer 3

尝试覆盖"活动"类：

.navbar-nav .active { text-decoration: underline; background-color: yellow; }