如何在 Bootstrap 中创建垂直进度条

Question

我已经创建了水平进度条，但是如何创建垂直进度条？这是我的代码，结果是垂直进度条，但它们看起来不像 Bootstrap 进度条。我想显示百分比，是垂直的，它们的填充高度是查询的结果。它们看起来像这样： http://prntscr.com/6l39cg 看起来不太好。我想看起来像这样： progress-bar 以及如何将高度更改为不是 100%，而是从 1 到 5。我试过 aria-valuemax="5" 但它不起作用。这是我的代码：

<div id="tab2" class="mtab_content">
             <p>
    <?php foreach ($result_question1 as $row) {
         echo "$row->question";
     $percent=round("$row->answer",2); 
         
        ?> 
              <div class="vertical-progressbar">
         <div class="progress-bar progress-bar-success" role="progressbar" 
         style="width: 
         <?php echo round($percent,2); ?>%;">
         </div>
      <?php echo round($percent,2); } ?> %
    </div>
  </div>

我的CSS是：

.vertical-progressbar{
  width: 300px;
  height: 40%;
  float: left;
  margin-right: 20px;
  
}

我找到了解决方案，但高度不会根据查询结果而改变：

.progress-vertical {
    width: 20px;
    height: 200px !important;
    position: relative;
}
.progress-vertical .bar {
    width: 100% !important;
    position: absolute;
    bottom: 0;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}

<?php foreach ($result_question1 as $row) {
         //echo "$row->question";
     $percent=round("$row->answer",2); 
        echo "<br/>";
     ?>
         <div class="progress progress-vertical progress-bar-success">
       <div class="bar" style="height: <?php echo round($percent,2); ?>%;"></div>
     
      <?php echo round($percent,2);  ?> %
    </div>

Answer 1

如何使用 CSS 变换将其旋转 90 度。

.vertical-progressbar{
    -ms-transform: rotate(90deg); 
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

如何在 Bootstrap 中创建垂直进度条

How to create Vertical progress bar in Bootstrap with

twitter-bootstrap

progress-bar