与两种颜色的垂直的被堆积的进展酒吧

Question

我正在尝试基于完成，尝试和创建一个进度跟踪器使用bootstrap但不能在单个进度条中生成两种颜色的总计数

是否有人知道如何实现如下进度跟踪器？

Answer 1

使用以下代码：（根据需要设置width）

.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/
vertical使用：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>