Bootstrap导航栏自定义

Question

我正在使用bootstrap 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

这可以在没有bootstrap的情况下完成，只有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

Answer 2

这是一个解决方案：

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

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