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

简单将此添加到您的CSS：

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

无需编辑HTML。

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

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

Answer 2

我认为最小宽度可能适用于进度条内的内容。那么看看我的小提琴上的例子：

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 3

@Arbel 的回答被严重低估了。我查阅了很多 stackoverflow 帖子，直到找到他的答案。

在他建议的更改中添加 !important 也很重要，否则代码将无法工作（在我的工作中，使用 react bootstrap 直到添加 !important 才起作用）