twitter-bootstrap – Twitter Bootstrap 3.0如何“徽章徽章 –

.label-as-badge {
    border-radius: 1em;
}

将此标签和徽章并排比较：

<span class="label label-default label-as-badge">hello</span>
<span class="badge">world</span>

它们看起来是一样的。但在CSS中，标签使用em，所以它缩放得很好，它仍然具有所有的“color”类。因此，标签将更好地扩展到更大的字体大小，并且可以用标签成功，标签警告等着色。以下是两个示例：

<span class="label label-success label-as-badge">Yay! Rah!</span>

或者事情更大：

<div style="font-size: 36px"><!-- pretend an enclosing class has big font size -->
    <span class="label label-success label-as-badge">Yay! Rah!</span>
</div>

11/16/2015：看看我们将如何在Bootstrap 4中做到这一点

看起来像.badge类完全消失了。但是有一个内置的.label-pill类(here)，看起来像我们想要的。

.label-pill {
  padding-right: .6em;
  padding-left: .6em;
  border-radius: 10rem;
}

在使用它看起来像这样：

<span class="label label-pill label-default">Default</span>
<span class="label label-pill label-primary">Primary</span>
<span class="label label-pill label-success">Success</span>
<span class="label label-pill label-info">Info</span>
<span class="label label-pill label-warning">Warning</span>
<span class="label label-pill label-danger">Danger</span>

11/04/2014：这里有一个更新为什么交叉授粉警报类与.badge不是那么伟大。我认为这幅画总结起来：

这些警报类别不是设计与徽章。它渲染它们与想要的颜色的“提示”，但在最终的一致性被抛出了窗口和可读性是有问题的。那些警报骇客的徽章不具有视觉上的凝聚力。

.label-as-badge解决方案只是扩展了引导程序设计。我们保留了bootstrap设计师做出的所有决策，即他们为所有可能的颜色提供可读性和凝聚力的考虑，以及颜色选择本身。 .label-as-badge类只添加圆角，没有其他。没有引入颜色定义。因此，一行CSS。

是的，它是更容易砍掉和放弃那些.alert-xxxxx类 – 你不必添加任何行的CSS。或者你可以关心更多的小事情，并添加一行。