引导导航栏定制 [英] Bootstrap nav bar customization

问题描述

我使用bootstrap 3.1.1导航栏，并希望构建导航栏，如图所示。任何人都可以帮助我如何获得顶部的灰色区域在我的导航栏上，如何我可以更改为红色为所选的导航项目。

以下是我的代码

 < nav class =navbar navbar-inverserole =navigation> 
< div class =container-fluid> 
< div class =navbar-collapse collapse> 
< ul class =nav navbar-nav> 
< li class =active>< a href =＃>首页< / a>< / li& 
< li>< a href =＃laser> LASER< / a>< / li> 
< / ul> 
< / div> 
< / div><！ -  /。container  - > 
< / nav><！ -  /。navbar  - > 
  

我是新手，任何指导都将非常感谢。以下是

I am using bootstrap 3.1.1 nav bar and want build nav bar as shown in the image. Can anyone please help me how can I get the top grey area on my nav bar and how I can change it to red for the selected nav item.

Following is my code

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

I am a newbie any guidance will be greatly appreciated. Following is the jsfiddle. How can I override the border of .navbar-inverse when the child

is active.

解决方案

Here is a solution:

I added a 5px gray border to the top of the entire navbar-inverse and then pulled the list items up by 5px by using a negative margin on the lis. I also added a transparent 5px border-top to the rest of the lis to even it out.

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

Edit: I also had to make the color: #E61C3D for the active link.

Here is a link to the fiddle: http://jsfiddle.net/au4R4/4/

这篇关于引导导航栏定制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！