在Bootstrap中定义多个条形以表示白天

Question

我需要定义一个带有多个间隔的水平条。我尝试开始：

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

demo

结果是

我需要用多个时间间隔代表一天。白天栏必须具有一些标签以仅显示小时。每个间隔内必须有一个标签。仅仅因为一个图像胜过一千个单词：

我如何实现这个目标？有任何帮助或建议吗？

Answer 1

您可以对“空”时隙使用透明的进度条间隔。进度条外部的标签完全由您决定，因为这不是Bootstrap提供的。

 <div class="progress">
        <div class="progress-bar bg-transparent" role="progressbar" style="width: 10%"></div>
        <div class="progress-bar" role="progressbar" style="width: 20%" aria-valuemin="0" aria-valuemax="100">8:30-12:00</div>
        <div class="progress-bar bg-transparent" role="progressbar" style="width: 20%"></div>
        <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuemin="0" aria-valuemax="100">15:00-18:00</div>
 </div> 

https://www.codeply.com/go/A9mNyW8geC