在.nav-tabs周围添加边框可将.active类的上边框加倍

Question

我做了很多研究，无法为这个问题提出一个优雅的解决方案。

我想要的是导航按钮周围的边框，所以我这样做：

.nav-tabs{border:1px solid #ddd;}

问题是活动类似乎加倍了我的顶部边框（以及最左边标签的左边框）。我试着像这样撤消它：

.nav-tabs > li.active{border-top-style:none;}

这会删除顶部边框，但会添加底部边框。

我已经看到了解决方案，然后将边框底部设置为选项卡内容的背景颜色，同时还保持-3px的边距底部。但那不适合我。

如果没有.active状态将它们加倍，我如何在导航按钮周围添加边框？

感谢任何有用的解决方案。

以下是小提琴的链接：https://jsfiddle.net/43zzpvg2/

Answer 1

如果没有看到你有什么，请试试这个

.nav-tabs > li.active{border-top-color: transparent;}

过去，当删除边框时，我经历过标签移动。

我构建了类似于here

之后的内容

Answer 2

尝试添加!important，如下所示

.nav-tabs .active {border-top: none!important}