Bootstrap 4.6.0升级至4.6.2后小字体变大、标签页失色，如何修复？

为什么补丁级更新会出现样式变化？ #

虽然语义化版本规范要求补丁版仅修复bug、保持向后兼容，但Bootstrap 4.6.2中的这些样式变化，实际是针对旧版本隐性问题的修复：

• <small>和.small的字体调整，是为了修正不同排版场景下字体大小继承不一致的bug；
• .nav-tabs的阴影修改，是为了规范组件样式，移除了非激活标签页原本不符合设计规范的默认阴影。
  这些修复本意是完善框架，但如果你的代码依赖了旧版本中这些“不规范”的样式表现，就会触发兼容性问题。4.6.1版本未包含这些修复，所以升级时一切正常。

问题修复方案 #

1. 还原<small>标签和.small类的字体大小 #

Bootstrap 4.6.0中<small>和.small默认字体大小为父元素的80%，4.6.2调整了该比例。你可以通过自定义CSS覆盖：

/* 提高选择器优先级，避免被框架样式覆盖 */
body small, body .small {
  font-size: 80%;
  /* 按需还原字体权重，4.6.0默认值为400 */
  font-weight: 400;
}

如果框架样式优先级更高，可添加!important（优先用高优先级选择器，万不得已再用）：

small, .small {
  font-size: 80% !important;
}

2. 恢复非激活标签页的阴影 #

Bootstrap 4.6.2移除了.nav-tabs .nav-link非激活状态的默认阴影，仅保留激活状态样式。你可以手动添加回去：

/* 给非激活标签页添加阴影，还原4.6.0的样式 */
.nav-tabs .nav-link {
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.125);
}
/* 确保激活状态阴影不受影响，可根据需求调整 */
.nav-tabs .nav-link.active {
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.25);
}

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