基于Bootstrap 5的Angular标签组件：切换时为何出现偏移？

问题根源：激活态.nav-link.active将字体粗细从400改为500，文本宽度发生变化，导致容器尺寸波动出现偏移。box-sizing: border-box无效是因为它仅控制内边距、边框是否计入元素宽高，无法干预文本内容本身的尺寸变化。

以下是几种可行的解决思路：

• 伪元素模拟粗体效果：保持非激活态文本的字体粗细不变，激活态通过伪元素叠加粗体文本实现视觉效果，确保容器宽度始终基于原字体尺寸。

  .nav-link {
    font-size: 16px;
    font-weight: 400;
    line-height: 8px;
    height: 33px;
    color: #4285eb !important;
    position: relative;
    overflow: hidden;
  }
  
  .nav-link.active::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 500;
    color: #4285eb;
  }
  

  需在HTML中给每个.nav-link添加data-text="标签文本内容"属性，让伪元素同步显示对应文本。

• 使用可变字体平滑过渡：若项目使用支持字重变化的可变字体（如Roboto Flex等），通过font-variation-settings调整字重，避免字体宽度突变：

  .nav-link {
    font-size: 16px;
    font-weight: 400;
    font-variation-settings: 'wght' 400;
    line-height: 8px;
    height: 33px;
    color: #4285eb !important;
    transition: font-variation-settings 0.2s ease;
  }
  
  .nav-link.active {
    background: rgba(66, 133, 235, 0.15) !important;
    border-radius: 4px;
    font-variation-settings: 'wght' 500;
  }
  

• 预留宽度空间：给所有.nav-link设置基于粗体文本的最小宽度，确保切换时容器尺寸足够容纳粗体文本：

  .nav-link {
    font-size: 16px;
    font-weight: 400;
    line-height: 8px;
    height: 33px;
    color: #4285eb !important;
    width: fit-content;
    min-width: 80px; /* 替换为实际最长粗体标签的宽度 */
  }
  

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