Twitter引导程序进度条百分比标签

Question

我创建了一个Twitter引导程序进度条，并将它们放在一个表中。
但当百分数都是低时，标签不能被看作是这样的：http://jsfiddle.net/mavent/w48qH/4/

关于这一点，加入min-width建议：http://getbootstrap.com/components/#progress-label

但添加最小宽度使得进度条长度不合逻辑，所有杆的长度变成相同：http://jsfiddle.net/mavent/w48qH/7/

表格栏在大屏幕上彼此距离很远。第一列和第二列之间的空间太大。

什么是更好的方式来显示小百分比的进度条？更好的桌面布局？

Answer 1

我认为最小宽度可能是指进度条内的内容。所以，看看我的例子在你的提琴建：

HTML：

<div class="progresslabel"> % 12</div><br> 

CSS：

.progresslabel{ 

    min-width:40px; 
} 

的jQuery：

$('.progresslabel').each(function(){ 
    if($(this).width() > $(this).parent().width()){ 
    $(this).css("color","black"); 
    } 
}); 

现在，这当然很糟糕，但这只是一个例子，你可以随心所欲地做任何事情，但我希望你明白。

这里是一个捣鼓你：

http://jsfiddle.net/6fLk8/3/

Answer 2

只需添加到你的CSS：

.progress-bar { 
    overflow-x:visible; 
    white-space:nowrap; 
    color:black; /* color is for demo purposes */ 
} 

无需编辑HTML。

这会显示标签而不会影响进度栏的颜色部分。

演示：http://jsfiddle.net/w48qH/9/