bootstrap-4 - 两种颜色的垂直堆叠进度条

Question

我正在尝试使用 bootstrap 创建一个基于完成、尝试和总数的进度跟踪器，但无法在单个进度栏中制作两种颜色

有谁知道我如何才能实现下面的进度跟踪器？

Answer 1

使用以下代码:(根据需要设置宽度)

.container { margin-top: 50px; }


.progress{
  transform: rotate(-90deg);
  width: 105px;
} 

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  <div class="container">
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>

这是 Bootstrap 4 的进展:https://getbootstrap.com/docs/4.0/components/progress/
对于垂直使用:transform:rotate(-90deg);

编辑您的评论

.progress{
 transform: rotate(-90deg);
  width: 105px;
  margin-top:160px;
margin-left: -81px;
} 
.flexable{display: flex;}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>


<div class="container">
<div class="flexable">
  <div class="progress"> 
      <div class="progress-bar" role="progressbar" style="width: 30%;" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100">
  </div> 
  </div> 

<div class="progress"> <div class="progress-bar" role="progressbar" style="width: 90%;" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 75%;" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div> </div> </div>
<div>