Twitter 引导进度条百分比标签答案

【问题标题】：Twitter bootstrap progress bar percentage labelTwitter 引导进度条百分比标签
【发布时间】：2014-02-19 17:35:46
【问题描述】：

我创建了一个 Twitter 引导进度条并将它们放在一个表格中。
但是当百分比很低时，标签不能像这样看到：http://jsfiddle.net/mavent/w48qH/4/

但添加 min-width 会使进度条长度不合逻辑，所有条长度都相同：http://jsfiddle.net/mavent/w48qH/7/

此外，在大屏幕中，表格列之间的距离也很远。第一列和第二列之间的空间太大。

显示小百分比进度条的更好方法是什么？还有更好的表格布局？

【问题讨论】：

【解决方案1】：

只需将其添加到您的 CSS：

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

无需编辑 HTML。

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

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

【讨论】：

【解决方案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");   
    }
});

现在这当然看起来很糟糕，但这只是一个例子，你可以用它做任何你想做的事情，但我希望你明白。

这是给你的小提琴：

【讨论】：

【解决方案3】：

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

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

【讨论】：