是否可以向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>