如何使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元素设置为显示内联而不是块级元素。内联元素不具有固定的尺寸，因为它们是流动的。块级元素可以，但不能很好地放在一行文本中（正如您期望的那样）。

快乐的媒介是将标签显示为内嵌块，如下所示：

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

此技术有known issues with IE6 and IE7但它与用户的关联性越来越低。

Answer 2

您可以使用内联样式将以下样式添加到PatientNum<- c(1, 2, 3, 4, 5) Age<- c(10, 21, 51, 42, 35) ProcedureCode1 <- c("819.1 bla bla bla", "820.1 bla bla bla", "823.2bla bla bla", "946.5bla bla bla", "123.45bla bla bla") ProcedureCode2 <- c("126.78 bla bla bla", "315.49 bla bla bla", "687.32 bla bla bla", "123.45 bla bla bla", "823.2 bla bla bla") ProcedureCode3<-c("987.65 bla bla bla","543.21 bla bla bla","123.45 bla bla bla","823.2 bla bla bla", "823.2 bla bla bla") dataset <- data.frame(PatientNum, Age, ProcedureCode1,ProcedureCode2,ProcedureCode3) 或span标签中以固定宽度—

div

Answer 3

您可以使用以下内容：

<span class="badge badge-primary w-100">XYZ</span>