我来帮你搞定这个问题！你遇到的核心问题是CSS选择器的精度不够，导致自定义样式没能覆盖Angular导航标签页依赖的Bootstrap默认规则。

问题分析 #

你当前的CSS选择器是：

.nav-item .active { 
  background-color: rgb(119, 218, 218) !important; 
  border-bottom: 0px; 
  color:rgb(168, 19, 168); 
}

这个选择器的逻辑是选中.nav-item下所有带.active类的元素，但实际上.active类是直接绑定在.nav-link标签上的。更关键的是，Bootstrap默认样式里的.nav-tabs .nav-link.active选择器权重比你的更高，所以你的border-bottom设置根本没生效。

解决方案 #

把CSS选择器改成更精准的版本，直接命中激活状态的.nav-link，确保能覆盖默认样式：

.nav-tabs .nav-link.active {
  background-color: rgb(119, 218, 218) !important;
  /* 直接移除底部边框 */
  border-bottom: none !important;
  /* 也可以设置边框颜色和背景色一致，视觉上隐藏边框 */
  /* border-bottom-color: rgb(119, 218, 218) !important; */
  color: rgb(168, 19, 168);
}

额外说明 #

• 使用!important是为了强制覆盖Bootstrap默认的border-bottom样式；如果不想用!important，可以进一步提高选择器权重，比如加上组件的自定义类，例如your-custom-class .nav-tabs .nav-link.active，同样能覆盖默认规则。

内容的提问来源于stack exchange，提问作者Punit