如何为Bootstrap徽章（badge）添加内边距（padding）？

你的padding-right不生效，大概率是因为自定义样式的优先级低于Bootstrap内置的徽章样式，或者没有正确覆盖Bootstrap的CSS变量。以下是几种可行的解决方法：

• 方法1：利用Bootstrap的CSS变量（推荐）
  Bootstrap 5+的徽章使用CSS变量控制内边距，直接修改对应变量即可，无需担心优先级问题：

  .badge.badge-larger {
      --bs-badge-padding-right: 5px;
      font-size: 0.9em;
  }
  

• 方法2：提高选择器优先级
  让自定义选择器的权重高于Bootstrap内置样式，比如同时包含徽章的主题类（badge-secondary）：

  .badge.badge-secondary.badge-larger {
      padding-right: 5px;
      font-size: 0.9em;
  }
  

• 方法3：临时使用!important（不推荐，仅应急）
  如果上述方法都无效，可以强制覆盖样式，但这会破坏CSS的优先级规则，尽量少用：

  .badge.badge-larger {
      padding-right: 5px !important;
      font-size: 0.9em;
  }
  

另外，你可以通过浏览器开发者工具（F12）查看徽章元素的样式，确认padding-right是否被其他规则覆盖，找到具体的冲突样式后再针对性调整。

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