Bootstrap 导航栏自定义

Question

我正在使用引导程序 3.1.1 导航栏，并希望构建导航栏，如图所示。谁能帮助我如何获得导航栏上的顶部灰色区域以及如何将所选导航项的顶部灰色区域更改为红色。

以下是我的代码

<nav class="navbar navbar-inverse" role="navigation">
    <div class="container-fluid">
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#laser">LASER</a></li>
        </ul>
      </div>
    </div><!--/.container -->
  </nav><!--/.navbar-->

我是新手，任何指导将不胜感激。以下是jsfiddle。孩子时如何覆盖 .navbar-inverse 的边框

处于活动状态。

Answer 1

这是一个解决方案：

我在整个navbar-inverse 的顶部添加了一个5px 灰色边框，然后使用lis 上的负边距将列表项向上拉5px。我还在lis 的其余部分添加了一个透明的 5px 边框顶部以使其均匀。

.navbar-inverse .navbar-nav > li.active {
    border-top: 5px solid #E61C3D;
}
.navbar-inverse .navbar-nav > li.active a{
    color: #E61C3D;
}
.navbar-inverse{
    border-top: 5px solid gray;
}
.navbar-inverse .navbar-nav > li{
    margin-top: -5px;
    border-top: 5px solid transparent;
}

编辑：我还必须为活动链接创建color: #E61C3D。

这里是小提琴的链接：http://jsfiddle.net/au4R4/4/

Answer 2

这可以在没有引导程序的情况下完成，只有 css 可以。

ul li {
    list-style: none;
    text-transform: uppercase;

}
ul li a {
    float: left;
    padding: 15px;
    background: #444;
    color: #fff;
    text-decoration: none;
    border-top: 5px solid #ddd;
}
ul li a:hover, ul li.active a {
    background: #222;
    color: #cc0233;
    border-top: 5px solid #cc0233;
}

检查这个jsfiddle； http://jsfiddle.net/f4hYB/2