Bootstrap进度条,将文本放在“Stacked”栏上

时间:2014-07-07 14:39:01

标签: html twitter-bootstrap

也许我错过了一些简单的东西,但我试图在Stacked栏上放置一些文字用于Twitter-Bootstrap的进度条: Stacked Bar

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

我只是想在堆叠条的每个部分上显示文本(50%,20%,30%),但我无法弄清楚正确的实现。任何帮助非常感谢!

谢谢!

1 个答案:

答案 0 :(得分:1)

根据Twitter Bootstrap Docssr-only类可以隐藏除屏幕阅读器之外的所有设备的元素。因此,在这种情况下,它会隐藏您要在除SR之外的所有其他设备上显示的标签。

删除课程并且有效。

Updated JSFiddle