.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
color: #555;
cursor: default;
background-color: #fff;
border: 1px solid #ddd;
border-bottom-color: transparent;
}
胶囊式的导航菜单
基本的胶囊式导航菜单
如果需要把标签改成胶囊的样式,只需要使用 class .nav-pills 代替 .nav-tabs 即可。

.nav-pills > li {
float: left;
}
.nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover {
color: #FFF;
background-color: #337AB7;
}
垂直的胶囊式导航菜单
在使用 class
.nav、.nav-pills 的同时使用 class
.nav-stacked,让胶囊垂直堆叠。
加上.nav-stacked能使得胶囊垂直的原因:
.nav-stacked > li {
float: none;
}
两端对齐的导航
您可以在屏幕宽度大于 768px 时,通过在分别使用.nav、.nav-tabs
或.nav、.nav-pills的同时使用 class .nav-justified,让标签式或胶囊
式导航菜单与父元素等宽。在更小的屏幕上,导航链接会堆叠。
为了更好的看出效果,给.container加上背景色

小屏幕时:

禁用链接
li可以添加.active可以显示目前是此菜单的状态,同样可以给其添加.disabled,使其显示为不可用状态,同时会禁用该链接
的:hover状态。