Question

我正在尝试将自定义CSS样式应用于Bootstrap导航栏，以便在鼠标悬停时为链接文本加下划线。我也喜欢淡化的下划线。

以下是我目前的情况：https://jsfiddle.net/xfddh0r5/

.navbar-default {
    background-color: #fff;
}
.navbar-default .navbar-nav > li {
    background-color: #fff;
}
.navbar-default .navbar-nav > li > a {
    color: #333;
    border-bottom: 1px solid transparent;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
    background-color: #fff;
    color: #439348;
    border-bottom: 1px solid #439348;
}

我注意到两个奇怪的问题：

下划线显示在导航栏的底部，而不是直接显示在文本下方。
菜单项的链接“区域”似乎太大了。理想情况下，文本只是一个链接。

有人能告诉我为什么会这样吗？

非常感谢！

Answer 1

您可以将padding重置为0或减少值。并使用margin再次调整间距。

.navbar-default .navbar-nav > li > a {
  color: #333;
  border-bottom: 1px solid transparent;
  padding: 0; /*removing spacing*/
  margin: 14px; /*add spacing*/
}

Answer 2

链接有很多填充，以便于点击。如果要对文本应用边框，可以将文本放在范围内，然后将样式应用于该范围。

HTML：

<ul class="nav navbar-nav navbar-right">
  <li class="active"><a href="#"><span>Home</span></a></li>
  <li><a href="#"><span>Item 1</span></a></li>
  <li><a href="#"><span>Item 2</span></a></li>
</ul>

CSS：

.navbar-default .navbar-nav > li > a > span {
  border-bottom: 1px solid transparent;
}

您可以使用CSS过渡完成淡入淡出：

.navbar-default .navbar-nav > li > a:hover > span {
  border-bottom-color: #439348;
  transition: border 1s linear;
}

如何使用Bootstrap 3为导航栏中的链接加下划线？

2 个答案: