2013-11-22 3 views
4

Я использую bootstrap 3 и индикатор выполнения, чтобы показать рейтинг в таблице лидеров.Bootstrap Progress Bar

Leaderboard

Есть ли способ, чтобы настроить эту функцию, чтобы не иметь его показать «Из» части?

Например, его технически не продвигается, чтобы что-то завершить, его просто ранг, который будет показан таким же образом. Так что, действительно, я просто хочу снять коробку с ее заполнением, но также сделать так, чтобы ее круг с правой стороны.

Вот что я пытаюсь сделать

enter image description here

как побочный вопрос, любая идея, как удалить отступы на сНу баре прогресса в так выравнивается по центру, как другие содержание?

+0

Индикатор выполнения - это только бар. Любой другой текст нужно будет добавить прямо в ваш HTML – Phil

+0

Я думаю, что вы неправильно поняли, я просто не хочу, чтобы фон индикатора прогресса (пустой части) отображался. Короче говоря, часть, заполненная, должна быть просто шириной индикатора выполнения, поэтому она всегда «100%», но короче на основе процента – SBB

+0

Почему вы не сказали, что вместо «части» из «части» *? Просто используйте CSS для удаления границы и цвета фона. – Phil

ответ

4
.progress { 
    background-color: transparent; 
    box-shadow: none; 
    -webkit-box-shadow: none; 
} 

table .progress { 
    margin-bottom: 0; 
} 

.progress-bar { 
    border-radius: 4px; 
} 

Смотрите демо здесь (спасибо Ohgodwhy) - http://jsfiddle.net/r4zkv/4/

+5

[Я скучно.] (Http://jsfiddle.net/r4zkv/) – Ohgodwhy

+0

это замечательно: D – Vainglory07

1

Просто переопределить бутстраповских стили класса .progress:

.progress { 
    background-color: transparent; 
    border-radius: 0px; 
    -webkit-box-shadow: none; 
      box-shadow: none; 
} 

.progress-bar { 
    border-radius: 4px; 
} 

Убедитесь, что вы не изменили файл bootstrap.css напрямую, просто добавьте этот стиль в файл site.css, который всегда должен появляться после загрузки bootstrap.css в любом проекте, чтобы вы могли переопределить стили по умолчанию для этого стиля.