Bootstrap 5下划线导航栏菜单项答案

【问题标题】：Bootstrap 5 underline navbar menu itemBootstrap 5下划线导航栏菜单项
【发布时间】：2021-11-09 18:36:04
【问题描述】：

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

我的代码：

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

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

【问题讨论】：

您是否尝试将text-decoration-underline 类添加到元素中？
如果我没记错的话，我希望始终应用 :focus w3schools.com/cssref/sel_focus.asp text-decoration-underline。
Does this answer your question by any chance?
没有。这就是我感兴趣的 :focus 或具有类似结果的东西。我可以使用 vanilla css 轻松做到这一点，但它不适用于 bootstrap。

【解决方案1】：

您应该在 .nav-link 元素上应用 pesudo 类 :focus

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

【讨论】：

这个行为有点像 :active 点击后有下划线和黄色，但不保留。
是的 :active 不是你的问题的解决方案
你能告诉我你想做什么
抱歉，我花了一些时间对其进行故障排除，而我真正想要的不仅是 :focus，而且当用户停留在页面上时，下划线仍然存在。通常是当前页面或未在 css 中完成的内容。就我而言，我正在使用 hugo 并且有一种方法可以做到这一点。谢谢你的回答。它帮助我找到了真正的问题，您的解决方案实际上是正确的焦点！

【解决方案2】：

你的css 不影响的原因是因为.nav-item 永远不会专注..

如果你想让它得到重点关注，请使用tabindex。

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

【讨论】：

感谢您的回答。正如我向 Zain 提到的，我想做的是在用户位于所选页面（当前页面）时实际保留下划线，而不仅仅是焦点。您的解决方案对于 :focus 是正确的，并帮助我找到了我真正需要的东西。

【解决方案3】：

尝试覆盖“活动”类：

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

【讨论】：