在引导进度条顶部添加数字步骤

Question

如何在 Bootstrap 4 进度条的顶部添加步骤（里面有数字的圆圈），以使其均等。我的想法是这样的：

// css
.wrapper-progress-step {
  /* what should go here? this would guarantee that steps are 'floating' on top of the bar*/
}

.steps {
  /*what should go here? probably position relative to go on top of the bar*/
}

.circle {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.428571429;
  border-radius: 15px;
  margin-top: 0;
}

<div class="wrapper-progress-step">
  <div class="progress">
    <div class="progress-bar bg-success" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
    </div>
  </div>
  <!-- this should go above the progress bar dividing the bar in equally spaces -->
  <div class="steps">
    <div class="circle">1</div>
    <div class="circle">2</div>
    <div class="circle">3</div>
    <div class="circle">4</div>
  </div>
</div>

你们觉得这种方式可行吗？接受新想法

Answer 1

.steps {
  display: flex;
  justify-content: space-evenly;
  width: 100%;
 }

Flexbox 提供了一种简单的平等分配方式。我认为这会给你一个正确的方向。