是否可以向Bootstrap的活动标签添加箭头？

Question

看到这个图片我在Photoshop中压缩：

以上是在Bootstrap中完成的导航栏，但我添加了用于说明目的的指针。

是否可以在Bootstrap中做到这一点？如果这太具有挑战性，是否有任何导航栏插件可以完成这项工作？其次，当我将鼠标悬停在导航链接上时，如何让悬停动画流畅地滑动，而不是突然弹出到悬停的链接？

Tks！我也开放给任何插件等。

Answer 1

是的，你可以添加一个箭头到Bootstrap的活动标签下面是一个示例代码，它可以帮助你。

.navbar-default .navbar-nav { 
 
    margin-top:40px /*---*/ 
 
} 
 
    
 
.navbar-default .navbar-nav > li.active{ 
 
    position: relative; 
 
    } 
 
    .navbar-default .navbar-nav > li.active:after{ 
 
    border-bottom: 10px solid #e7e7e7; 
 
    border-left: 10px solid transparent; 
 
    border-right: 10px solid transparent; 
 
    content: ""; 
 
    height: 0; 
 
    left: 0; 
 
    margin: auto; 
 
    position: absolute; 
 
    right: 0; 
 
    top: -10px; 
 
    width: 0; 
 

 
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<nav class="navbar navbar-default navbar-fixed-top"> 
 
     <div class="container-fluid"> 
 
     <div id="bs-example-navbar-collapse-6" class="collapse navbar-collapse"> 
 
      <ul class="nav navbar-nav"> 
 
      <li><a href="#">Home</a></li> 
 
      <li class="active"><a href="#">Link</a></li> 
 
      <li><a href="#">Link</a></li> 
 
      </ul> 
 
     </div><!-- /.navbar-collapse --> 
 
     </div> 
 
    </nav>