twitter-bootstrap 带下划线的 Bootstrap3 导航链接样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24158160/
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
Bootstrap3 Nav Link Style with underline
提问by ineffable p
I am looking to style Bootstrap Menu as in Youtube with underline.
我正在寻找像 Youtube 中一样带有下划线的 Bootstrap Menu 样式。
So far I have done below code but not achieving the effect , border bottom is not working for a:active.
到目前为止，我已经完成了下面的代码但没有达到效果， 边框底部不适用于 a:active。
I have added my css after the bootstrap css , so no possibility of override but still not working.
我在 bootstrap css 之后添加了我的 css，所以不可能覆盖但仍然无法正常工作。
Style CSS
样式 CSS
a {
color: black;
}
.navbar-nav>li>a:hover ,
.navbar-nav>li>a:active {
border-bottom: 2px solid #ad1f2d!important;
}
HTML Code
HTML代码
<div class="navbar" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@*<a class="navbar-brand" href="#"><img src="../../img/logo.jpg" alt="77 Markets" height="100" width="100" style="margin-left: -10px; margin-right: 20px"></a>*@
</div>
<div class="navbar-collapse navbar-right collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
@Html.Partial("_LoginPartial")
</div>
</div>
</div>
回答by Kisspa
do you mean
你的意思是
ul li:hover:after{
border-bottom: 2px solid red;
bottom: 0;
content: "";
left: 0;
position: absolute;
width: 100px;
}
回答by Leigh Ciechanowski
Try adding the !important attribute e.g.
尝试添加 !important 属性，例如
a:hover {
border-bottom:2px solid #ad1f2d !important;
}
a:active {
border-bottom:2px solid #ad1f2d !important;
}
This will override any cascaded styles and will indicate if it an issue due to cascading styles.
这将覆盖任何级联样式，并指示它是否是由于级联样式引起的问题。
The above seems to not work for you so how about this, wrap you navigation links in a div with an ID
上面的内容似乎对你不起作用，那么这个怎么样，用一个 ID 将你的导航链接包装在一个 div 中
the CSS
CSS
#mydiv .navbar-nav>li>a:hover ,
#mydiv .navbar-nav>li>a:active {
border-bottom: 2px solid #ad1f2d!important;
}
and the HTML
和 HTML
<div id="mydiv" class="navbar-collapse navbar-right collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
@Html.Partial("_LoginPartial")
</div>
回答by the_butterfly_effect
A suggestion and I hope i'm not wrong. Have you try to specify the border for all element? Is it working? I'm thinking that the underline effect and border bottom cancel each other. And also check bootsrap CSS file include because it may cancel your custom CSS if it is specified after your custom CSS include.
一个建议，我希望我没有错。您是否尝试为所有元素指定边框？它在工作吗？我认为下划线效果和边框底部相互抵消。并且还要检查 bootsrap CSS 文件包含，因为如果它在您的自定义 CSS 包含之后指定，它可能会取消您的自定义 CSS。
