css - 添加一个三 Angular 形来表示 Bootstrap 中选定的导航项

Question

我有一个使用 Bootstrap 创建的网站。在我网站的顶部，我有两行用于导航。这些行的代码如下所示:

<nav class="navbar navbar-dark bg-info horizontal-nav">
  <ul class="nav navbar-nav list-inline">
    <li><a href="/" class="btn btn-basic">home</a></li>
    <li class="selected"><a href="/about" class="btn btn-basic">about</a></li>
    <li><a href="/contact" class="btn btn-basic">contact</a></li>
  </ul>
</nav>

<nav class="navbar horizontal-nav navbar-light bg-faded">
  <ul class="nav navbar-nav list-inline">
    <li><a href="/about/us" class="btn btn-basic">intro</a></li>
    <li><a href="/about/service" class="btn btn-basic">service</a></li>
  </ul>
</nav>

渲染时，它看起来像这样:

+---------------------------------------+
| home   about   contact                |
+---------------------------------------+
| intro   service                       |
+---------------------------------------+

我正在尝试为所选元素显示一个三 Angular 形。这样用户就知道他们在哪里。本质上，我正在尝试做这样的事情:

+---------------------------------------+
| home   about   contact                |
+----------^----------------------------+
| intro   service                       |
+------------^--------------------------+

我如何使用 CSS/Bootstrap 做到这一点？谢谢!

Answer 1

使用 content after 创建形状，然后将其添加到事件的 Bootstrap 状态。参见示例。

.navbar.navbar-dark,
.navbar.navbar-light {
  height: 60px;
}
nav.navbar .navbar-nav li.nav-item.active:after {
  content: "";
  position: relative;
  margin-left: -15px;
  left: 50%;
  top: -20px;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 15px solid white;
}

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

<hr>
<div class="container">
  <nav class="navbar navbar-dark bg-info">
    <ul class="nav navbar-nav">
      <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>

      </li>
      <li class="nav-item"> <a class="nav-link" href="#">About</a>

      </li>
      <li class="nav-item"> <a class="nav-link" href="#">Contact</a>

      </li>
    </ul>
  </nav>
</div>
<hr>
<div class="container">
  <nav class="navbar navbar-light bg-faded">
    <ul class="nav navbar-nav">
      <li class="nav-item active"> <a class="nav-link" href="#">Intro <span class="sr-only">(current)</span></a>

      </li>
      <li class="nav-item active"> <a class="nav-link" href="#">Services</a>

      </li>
    </ul>
  </nav>
</div>