当前位置: 动力学知识库 > 问答 > 编程问答 >

css - bootstrap nav tabs over a gradient

问题描述:

By default, the bootstrap nav tabs have a solid background over the active tab so that the bottom border does not appear.

Unfortunately, we're displaying the tabs over a subtle gradient background, so we need a transparent background for active and inactive tabs (we just want a white border: http://cl.ly/image/0x2u132k2F3k).

If we remove the background color from the active tab, we see the bottom border: http://cl.ly/image/0x2H1V1W2t3a.

If we remove the bottom-border from the .nav-tabs class and simply include the bottom border and inactive tabs the border doesn't extend to the full width of the space: http://cl.ly/image/0d361q2A1F3S

Is there any way that we can achieve the line extending all the way to the right, underneath the inactive tabs and not under the active tab without using a background color on the active tab?

Update: Here is a fiddle demonstrating the issue: 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;

}

分享给朋友:
您可能感兴趣的文章:
随机阅读: