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

Question

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

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

Answer 1

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

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