Как сделать кнопки значков Bootstrap одинаковой ширины?

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 элементы для отображения инлайн вместо того, как элемент уровня блока. Внутренние элементы не могут иметь фиксированные размеры, поскольку они являются текучими. Элементы уровня блока могут, но не сидеть красиво в строке текста (как и следовало ожидать, ярлык).

Счастливая среды для отображения метки в качестве встроенного блока, например, так:

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

Есть known issues with IE6 and IE7 для этой техники, но его становится все менее актуальным для пользователей там.