Bootstrap-border-bottom Links nur Text

Question

Ich habe dieses Menü zu:

<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> 

Jetzt versuche ich, eine benutzerdefinierte Unterstreichungs von 4 Pixeln für den Text, sondern nur zu machen.

Ich versuchte dies:

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

aber dann nimmt die border-bottom den ganzen Raum

Wie kann ich es so funktioniert nur der Text nicht die ganze li unterstrichen wird?

Answer 1

Sie können dies tun:

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

siehe hier jsfiddle

gut mit Bootstrap a hat die padding so, wenn Sie die Grenze zu a und die a nicht so breit sein wie der li, entfernen padding von a und fügen padding zu li

CSS

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

hinzufügen möchten