如何在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); 
}