0

默认情况下，引导导航选项卡在活动选项卡上具有纯色背景，因此底部边框不会出现。

不幸的是，我们在一个微妙的渐变背景上显示选项卡，因此我们需要一个透明背景来显示活动和非活动选项卡（我们只需要一个白色边框：http ://cl.ly/image/0x2u132k2F3k ）。

如果我们从活动选项卡中删除背景颜色，我们会看到底部边框：http ://cl.ly/image/0x2H1V1W2t3a 。

如果我们从 .nav-tabs 类中删除底部边框并简单地包含底部边框和非活动选项卡，则边框不会扩展到空间的整个宽度：http: //cl.ly/image/0d361q2A1F3S

有什么方法可以在不使用活动选项卡上的背景颜色的情况下，在非活动选项卡下方而不是在活动选项卡下方实现一直向右延伸的线？

更新：这是一个演示问题的小提琴：http: //jsfiddle.net/E7ehj/

.container {
    background: -webkit-radial-gradient(center, ellipse cover, #276a75 0, #00455b 100%);
    padding: 30px;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
    color: white;
    background-color: transparent;
}
a {
    color: white;
}
4

0 回答 0