css - Bootstrap 进度条文本不居中

Question

我正在使用 Bootstrap 进度条来显示花费的金额与限额。

有时会超过限制，进度条会满。

但是，当它超过它太多时，您将无法再看到它上面的文本，因为它“居中”在 div 之外的进度条上。

正常工作:

  <div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">
    50%
  </div>
</div>

文本不再显示在栏上，因为它超出了 div

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="200" aria-valuemin="0" aria-valuemax="100" style="width: 200%;">
    200%
  </div>
</div>

fiddle http://jsfiddle.net/E9chu/

我希望我可以说如果它超过最大数量(我可以指定)然后将类设置为 blah它告诉文本现在以 progress 为中心div 而不是 progress-bar格

Answer 1

将此规则添加到您的 CSS:

.progress-bar {
    max-width: 100%;
}