Question

我想在进度条的正下方标注带有开始和结束标签的进度条。

例如：

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

但是我似乎无法找到一种简单的方法。 Bootstrap是否支持此功能，还是需要编写一些自定义CSS来附加这些标签？

Answer 1

Bootstrap没有附带标签。他们的标签版本是进度条内的文本，例如，60％。您可以使用CSS尝试类似的东西：

http://www.bootply.com/eZ9fFZwtmO

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

<强> CSS：

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

Answer 2

为什么不使用Bootstrap的内置flex utility classes？ Here's a codepen

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

不需要额外的CSS。

如何在Bootstrap的进度条中添加开始和结束标签？

2 个答案: