twitter-bootstrap - 如何使 Bootstrap Badge 按钮的宽度相同？

Question

如何强制这些 Bootstrap 徽章按钮具有相同的宽度？
width:100px没有任何效果:



http://jsfiddle.net/gbwgv71e/1/

<div style="width:100px" title="new flashcards" class="label label-danger label-as-badge" >0</div> 

<div style="width:100px" title="flashcards you have taken before" class="label label-warning label-as-badge">11</div> 

<div style="width:100px" title="flashcards you have to wait on before you take again" class="label label-default label-as-badge">222</div> 

<div style="width:100px" title="flashcards you've learned" class="label label-success label-as-badge">3333</div>

Answer 1

默认情况下，Bootstrap 设置 .label元素来显示内联而不是作为 block 级元素。内联元素不能具有固定尺寸，因为它们是流动的。 block 级元素可以，但不能很好地放在一行文本中(正如您期望的标签那样)。

快乐的媒介是将标签显示为内联 block ，如下所示:

<div style="display:inline-block; width:100px"
     class="label label-danger label-as-badge">0</div>

有 known issues with IE6 and IE7对于这种技术，但它与那里的用户的相关性越来越低。