代码之家 › 专栏 › 技术社区 › xcesco

在Bootstrap中为日间表示定义一个多条

bootstrap-4 css3 html

0

xcesco · 技术社区 · 7 年前

<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

结果是

我需要的是用多个间隔来表示一天。日间酒吧必须有一些标签来显示时间。每个间隔内必须有一个标签。仅仅因为一个图像胜过千言万语:

我怎样才能达到这个目标?有什么帮助或建议吗?

1 回复 | 直到 7 年前

1

Carol Skelly 7 年前

 <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