html - 在 .nav-tabs 周围添加边框会使 .active 类的顶部边框加倍

Question

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

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

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

问题是事件类似乎加倍了我的顶部边框(以及最左侧选项卡的左边框)。我尝试像这样撤消它:

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

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

我已经看到了将边框底部设置为选项卡内容的背景色同时还保持 -3 像素的边距底部的解决方案。但这对我不起作用。

如何在不使 .active 状态加倍的情况下在我的导航按钮周围添加边框？

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

这是 fiddle 的链接:https://jsfiddle.net/43zzpvg2/

Answer 1

没有看到你得到了什么，试试这个

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

在过去，当边框被移除时，我遇到过选项卡移动的情况。

我构建了与您所追求的类似的东西 here