bootstrap3：<br> <a href="https://i.stack.imgur.com/oLR93.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oLR93.png" alt="enter image description here"></a><br> しかし、今、それで：ナビゲーションバーのリンクは

Question

を強調した私は、ブートストラップ3、ウェブサイト上で働いていると私はボーダーの助けを借りてunderlindedナビゲーションバー内のリンクを作りたい、このような何か作ります

私は「パディングボトム」属性を試しましたが、それは何もしませんでした。
私のhtml：私が試した

<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
     <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 navbar-left" href="/index.html"><img class="nav-logo" src="/images/xcellent-logo/logo.png"></a> 
    </div> 
    <div id="navbar" class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav nav-underline"> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Services<span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><a href="stuff">stuff</a></li> 
      <li><a href="stuff">stuff</a></li> 
      <li><a href="stuff">stuff</a></li> 
      <li><a href="stuff">stuff</a></li> 
      <li><a href="stuff">stuff</a></li> 
      </ul> 
     </li> 
     <li><a href="stuff">stuff</a></span></li> 
     <li><a href="stuff">stuff</a></span></li> 
     <li><a href="stuff">stuff</a></span></li>    
     </ul> 
    </div><!--/.nav-collapse --> 
    </div> 
</nav> 

CSS：

.nav-underline a { 
border-bottom: transparent solid 2px; 
padding-bottom: 40px; 
} 
.nav-underline a:hover { 
border-bottom: $white solid 2px; 
} 

は、これを達成する方法はありますか？ご協力いただきありがとうございます！

Answer 1

ちょうどアンカーのパディングをliに移動します。ここには のカスタムCSSがあります。

.navbar-nav.nav-underline>li>a { 
    padding: 0px; 
} 

.navbar-nav.nav-underline>li { 
    padding: 15px; 
} 

以下

実施例である：

.nav-underline a { 
 
    border-bottom: transparent solid 2px; 
 
    padding-bottom: 40px; 
 
} 
 

 
.nav-underline a:hover { 
 
    border-bottom: red solid 2px; 
 
} 
 

 
.navbar-nav.nav-underline>li>a { 
 
    padding: 0px; 
 
} 
 

 
.navbar-nav.nav-underline>li { 
 
    padding: 15px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<nav class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
     <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 navbar-left" href="/index.html"><img class="nav-logo" src="/images/xcellent-logo/logo.png"></a> 
 
    </div> 
 
    <div id="navbar" class="navbar-collapse collapse"> 
 
     <ul class="nav navbar-nav nav-underline"> 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Services<span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="stuff">stuff</a></li> 
 
      <li><a href="stuff">stuff</a></li> 
 
      <li><a href="stuff">stuff</a></li> 
 
      <li><a href="stuff">stuff</a></li> 
 
      <li><a href="stuff">stuff</a></li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="stuff">stuff</a></span> 
 
     </li> 
 
     <li><a href="stuff">stuff</a></span> 
 
     </li> 
 
     <li><a href="stuff">stuff</a></span> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    <!--/.nav-collapse --> 
 
    </div> 
 
</nav>