且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

引导导航栏定制

更新时间:2022-10-19 13:17:17

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/