bootstrap border-bottom仅链接文本

Question

我有这个菜单：

<div class="navbar navbar-custom navbar-fixed-top">
    <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="/">MyWeb</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="/">Home</a></li>
                <li><a href="/Home/Features">Features</a></li>
                <li><a href="/Home/Download">Downloads</a></li>
                <li><a href="/Home/About">About</a></li>
                <li><a href="/Home/FAQ">FAQ</a></li>
                <li><a href="/Contact">Contact</a></li>
            </ul>
        </div>
    </div>

现在我尝试制作4像素的自定义下划线，但仅限于文本。

我试过了：

navbar-custom .navbar-nav > li > a {
     border-bottom : 4px solid black ;
} 

然后边界底部占据整个空间

我怎样才能使它工作，所以只有文字加下划线而不是整个li？

Answer 1

你可以这样做：

<强> CSS：

<style>
        navbar-custom .navbar-nav > li > a {
            display: inline-block;
            max-width: 100px;
            text-decoration: none;
        }

        span {
            border-bottom: 4px solid;
        }
</style>

<强> HTML：

<li><a href='#'><span>Home</span></a></li>

Answer 2

见这里 的 jsfiddle

与引导程序a一起使用padding因此，如果您要将边框添加到a，a不要像li那样宽}，从padding移除a并将padding添加到li

CSS

.navbar-custom .navbar-nav > li > a {
   border-bottom : 4px solid black ;
   padding:0;
 } 
.navbar-custom .navbar-nav > li {
  padding:15px;
}