在 .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}