Html 如何使用 Bootstrap 3 在导航栏中的链接下划线？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29198567/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to underline links in the navbar using Bootstrap 3?
提问by James
I'm trying to apply custom CSS styling to the Bootstrap navbar, so that the link text is underlined on mouseover. I'd also like the underline to fade in.
我正在尝试将自定义 CSS 样式应用于 Bootstrap 导航栏，以便链接文本在鼠标悬停时带有下划线。我也希望下划线淡入。
Here is what I have so far: https://jsfiddle.net/xfddh0r5/
这是我到目前为止所拥有的：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;
}
I've noticed two strange problems:
我注意到两个奇怪的问题：
- The underline appears at the bottom of the navbar, rather than directly under the text.
- The link 'area' for the menu items seems to be too big. Ideally just the text would be a link.
- 下划线出现在导航栏的底部，而不是直接在文本下方。
- 菜单项的链接“区域”似乎太大了。理想情况下，只是文本将是一个链接。
Could anyone tell me why this is happening?
谁能告诉我为什么会这样？
Many thanks!
非常感谢！
采纳答案by Stickers
You can reset the paddingto 0or decrease the values. And use marginto adjust the spacing again.
您可以将 重置padding为0或减少值。并使用margin再次调整间距。
.navbar-default .navbar-nav > li > a {
color: #333;
border-bottom: 1px solid transparent;
padding: 0; /*removing spacing*/
margin: 14px; /*add spacing*/
}
回答by Sean Fujiwara
The links have a lot of padding to make them easy to click on. If you want to apply a border to the text, you can put the text inside a span, and apply the style to that.
这些链接有很多填充，使它们易于点击。如果要对文本应用边框，可以将文本放在跨度内，然后对其应用样式。
HTML:
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:
CSS：
.navbar-default .navbar-nav > li > a > span {
border-bottom: 1px solid transparent;
}
You can accomplish the fade using CSS transitions:
您可以使用 CSS 过渡完成淡入淡出：
.navbar-default .navbar-nav > li > a:hover > span {
border-bottom-color: #439348;
transition: border 1s linear;
}
