Bootstrap Progress Bar文本不是中心

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>

小提琴http://jsfiddle.net/E9chu/

我希望我可以说它是否超过了最大数量（我可以指定这个）然后将类设置为blah，它告诉文本现在居中在progress div而不是progress-bar div

Answer 1

将此规则添加到CSS：

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