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