嗯，这是一个非常晚的回答，但我想我仍然会发表我的意见……我本可以把这个作为评论发布，因为这个答案本质上没有添加任何新的解决方案，但它确实为帖子增加了价值，作为另一种选择。但在评论中，由于字符限制，我无法给出所有的细节。

注意:这需要一个编辑来引导CSS文件-将.badge的样式定义移到.label-default之上。在我有限的测试中，没有发现任何实际的副作用。

而气息。seib的解决方案可能是用最少的CSS实现OP需求的最好方法，它可以在没有任何额外CSS的情况下达到相同的效果，就像Jens A. Koch的解决方案或使用.label-xxx上下文类，因为与progress-bar-xxx类相比，它们更容易记住。我不认为.alert-xxx类会产生同样的效果。

你所要做的就是在一起使用.badge和.label-xxx类(但是按照这个顺序)。不要忘记做上面注释中提到的更改。

<a href="#">Inbox <span class="badge label-warning">42</span></a>看起来是这样的:

重要提示:如果您决定升级并忘记在新的本地CSS文件中进行更改，此解决方案可能会破坏您的样式。我对这个挑战的解决方案是在我的自定义CSS文件中复制所有.label-xxx样式，并在所有其他CSS文件之后加载它。当我使用CDN加载BS3时，这种方法也有帮助。

* * P。S: **两个排名靠前的答案都有他们的优点和缺点。这只是你喜欢做你的CSS的方式，因为没有“唯一正确的方式”去做它。

简而言之:用警告-危险或进度条-危险替换徽章-重要。

它看起来像这样:Bootply Demo。

你可以将CSS类徽章与alert-*或progress -bar-*结合起来为它们着色:

与class="徽章警报-*"

  <span class="badge alert-info">badge</span> Info
  <span class="badge alert-success">badge</span> Success 
  <span class="badge alert-danger">badge</span> Danger   
  <span class="badge alert-warning">badge</span> Warning

警报文档：http://getbootstrap.com/components/#alerts

用class="badges progress-bar-*"(根据@clami219的建议)

  <span class="badge progress-bar-info">badge</span> Info
  <span class="badge progress-bar-success">badge</span> Success
  <span class="badge progress-bar-danger">badge</span> Danger
  <span class="badge progress-bar-warning">badge</span> Warning

进度条文档:http://getbootstrap.com/components/#progress-alternatives

Bootstrap 3删除了徽章的颜色选项。但是，我们可以手动添加这些样式。这是我的解决方案，这是JS Bin:

.badge {
  padding: 1px 9px 2px;
  font-size: 12.025px;
  font-weight: bold;
  white-space: nowrap;
  color: #ffffff;
  background-color: #999999;
  -webkit-border-radius: 9px;
  -moz-border-radius: 9px;
  border-radius: 9px;
}
.badge:hover {
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
}
.badge-error {
  background-color: #b94a48;
}
.badge-error:hover {
  background-color: #953b39;
}
.badge-warning {
  background-color: #f89406;
}
.badge-warning:hover {
  background-color: #c67605;
}
.badge-success {
  background-color: #468847;
}
.badge-success:hover {
  background-color: #356635;
}
.badge-info {
  background-color: #3a87ad;
}
.badge-info:hover {
  background-color: #2d6987;
}
.badge-inverse {
  background-color: #333333;
}
.badge-inverse:hover {
  background-color: #1a1a1a;
}

如果使用SASS版本(例如:thomas-mcdonald's的版本)，那么你可能想要稍微更加动态(尊重现有变量)，并使用与标签相同的技术创建所有徽章上下文:

// Colors
// Contextual variations of badges
// Bootstrap 3.0 removed contexts for badges, we re-introduce them, based on what is done for labels
.badge-default {
  @include label-variant($label-default-bg);
}

.badge-primary {
  @include label-variant($label-primary-bg);
}

.badge-success {
  @include label-variant($label-success-bg);
}

.badge-info {
  @include label-variant($label-info-bg);
}

.badge-warning {
  @include label-variant($label-warning-bg);
}

.badge-danger {
  @include label-variant($label-danger-bg);
}

LESS的对等物应该很简单。

当使用LESS版本时，你可以导入mixin。为彩色徽章创建自己的类:

.badge-warning {
    .label-variant(@label-warning-bg);
}

其他颜色也一样;只要把警告换成危险、成功等。

徽章的上下文类确实从Bootstrap 3中删除了，所以你必须添加一些自定义CSS来创建相同的效果，如…

.badge-important{background-color:#b94a48;}

引导