Twitter bootstrap progress bar процентная метка

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/