是否可以在Bootstrap的活动选项卡中添加箭头？

Question

请看我在Photoshop中看到的图片：

​

上面是一个导航条，是在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>

​