Css 如何将开始和结束标签添加到引导的进度条？

我想在进度条的正下方用开始和结束标签标记进度条

例如：

       [||||||||------------]
 <Start Label>          <End Label>

---

然而，我似乎找不到一个简单的方法来做到这一点。Bootstrap是否支持此功能，或者我是否需要编写一些自定义CSS来附加这些标签？

Bootstrap不附带标签。他们的标签版本是进度条中的文本，例如，显示60%。您可以使用CSS尝试以下内容：

---

为什么不使用Bootstrap的内置功能

---

不需要额外的css。

完美！感谢您的清晰快速的回复。

<div class="col-sm-6"><div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>
  <div class="start">Start</div>
   <div class="end">End</div>
</div>

.progress {margin-bottom:0;}
.start {float:left;}
.end {float:right; text-align:right;}

<div class="container">
    <div class="progress">
      <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <div class="d-flex justify-content-between">
        <div>Start</div>
        <div>End</div>
    </div>
</div>