Css 引导进度条文本不居中

我正在使用一个引导进度条来显示花费的金额与限制

有时，这将超过限制，进度条将被填满

但是，当它超过它太多时，您将无法再看到它上面的文本，因为它的“居中”与进度条在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>

50%

文本不再显示在栏上，因为它超过了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>

200%

拨弄

---

我的希望是，我可以说如果它超过了最大数量（我可以指定这个），然后将类设置为

blah

，这告诉文本现在在

进度
div中居中，而不是
进度条
div
将此规则添加到CSS中：

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

你有没有考虑过使用这个软件？我认为它最适合你的问题。谢谢你的建议，但如果需要的话，我宁愿保留我已经调整过的东西。需要支持旧浏览器：/I我听说你。。。下面是我的答案。太简单了，让我很难过：（这种情况经常发生。有时候你太沉迷于编码，以至于需要别人才能发现一件简单的事情。）