引导进度条，将文本放置在“堆叠”栏上

Question

也许我错过了一些简单的东西，但我试图在 Twitter-Bootstrap 的进度栏的堆叠栏上放置一些文本：堆叠栏。

<div class="progress">
   <div class="progress-bar progress-bar-success" style="width: 50%">
      <span class="sr-only">50%</span>
   </div>
   <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
      <span class="sr-only">20%</span>
   </div>
   <div class="progress-bar progress-bar-danger" style="width: 30%">
      <span class="sr-only">30%</span>
   </div>
</div>

JSFiddle 演示

我只是想让文本显示在堆叠栏的每个部分（50%、20%、30%）上，但我无法找出正确的实现。

Answer 1

根据 Twitter Bootstrap 文档，

sr-only

类用于向除屏幕阅读器之外的所有设备隐藏元素。因此，在这种情况下，它会隐藏您想要在除 SR 之外的所有其他设备上显示的标签。

删除该类，它就可以工作了。

更新了 JSFiddle。