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                       |
+---------------------------------------+

我正在尝试为所选项目显示三角形。这样用户就知道他们在哪里了。从本质上讲，我正在尝试做这样的事情：

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

如何使用CSS / Bootstrap执行此操作？谢谢！

Answer 1

使用后面的内容创建形状，然后将其添加到活动的Bootstrap状态。见例。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

添加三角形以表示Bootstrap中的选定导航项

1 个答案: