Bootstrap nav-tab组件active激活状态视觉显示异常问题咨询

问题排查步骤 #

• 优先排查样式冲突：这是这类问题最高发的原因。Bootstrap的nav-tabs激活状态下划线依赖.nav-link.active的border-bottom样式实现，你自定义的.network-tab类、其他全局样式都可能因为优先级更高覆盖了默认的激活样式。你可以按F12打开开发者工具，选中处于激活状态的tab按钮，查看「计算样式」中的border-bottom属性，确认是否被其他样式覆盖，找到冲突样式后要么调高.active相关样式的优先级，要么修改冲突的自定义样式即可。
• 修正代码冗余问题：你当前代码中第一个tab的id写为all-networks- tab，中间多了两个空格，虽然暂时不影响功能，但后续如果有JS通过id选择元素很容易触发异常，建议修正为all-networks-tab。
• 确认版本与逻辑问题：如果样式排查无异常，再看两点：一是近期是否升级过Bootstrap版本，Bootstrap4和Bootstrap5的nav-tabs样式规则存在差异，版本变动后未适配自定义样式也会导致显示异常；二是检查动态生成tab的逻辑，是否存在切换tab时没有正确移除旧标签active类的情况，但你当前点击切换内容显示正常，该问题概率极低。

结论 #

该问题基本不是Bootstrap组件本身的问题，90%以上概率是样式冲突导致，优先排查样式即可。

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