Bootstrap v5如何固定通知徽章宽度？数字变动致徽章尺寸变化

直接给你调整后的代码，解决尺寸跳动和居中问题：

修改后的HTML #

<button class="btn btn-orange w-75 fs-4 mb-3 position-relative">
  Next Round
  <span class="position-absolute top-0 start-100 translate-middle rounded-pill badge bg-secondary fs-6 fixed-badge">
    {{ count }}
  </span>
</button>

自定义CSS #

.fixed-badge {
  /* 设置固定宽高，可根据字体大小调整数值 */
  width: 2rem;
  height: 2rem;
  /* 重置默认内边距，避免内容偏移 */
  padding: 0;
  /* 用flex布局实现垂直水平双居中 */
  display: flex;
  align-items: center;
  justify-content: center;
}

关键说明 #

• 固定宽高直接解决数字变动时的尺寸跳动问题，数值可根据fs-6的字体大小微调，比如改成1.8rem更贴合
• flex布局是最稳妥的居中方案，比单纯用text-align: center+line-height适配性更强，不会因字体变化失效
• 重置padding是因为Bootstrap徽章默认带内边距，会导致固定尺寸内的内容偏移

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