Html 引导进度条，将文本放置在；“堆叠”；酒吧

也许我遗漏了一些简单的东西，但我正试图在推特引导的进度条的堆叠栏上放置一些文本：

<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>

50%
20%
30%

<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>

我只是想让文本显示在堆叠条的每一段上（50%、20%、30%），但我无法找到正确的实现方式。非常感谢您的帮助

谢谢大家!

根据，仅sr类用于向除屏幕阅读器之外的所有设备隐藏元素。因此，在本例中，它隐藏了要在除SRs之外的所有其他设备上显示的标签

移除该类，它就会工作

---

.

我在您的span之后放置了一个p标记，文本出现了。看看。。。编辑：我删除了仅限sr的类，它显示为文本。：）必须是隐藏文本的

sr only

类。

sronly

用于屏幕阅读器，对盲人友好，否则不可见。去掉它，你就没事了。你把它倒过来了：它把屏幕阅读器使用的文本隐藏起来，不让其他可能被它弄糊涂的人看到。这就是我要说的。我可能写得不清楚：-）编辑：更新。谢谢你的通知。真有趣！谢谢