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中创建垂直进度条

1 个答案: