boostrap4 纵向进度条

html boostrap4纵向进度条

参考自:https://stackoverflow.com/questions/16318375/how-to-vertically-align-a-progress-bar-in-twitter-bootstrap

增加了自定义的纵向css样式

主要内容

<style>
.progress-bar-vertical {
      30%;
    /* min-height: 100px; */
    float: left;
    display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
    display: -ms-flexbox;  /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
    display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
    align-items: flex-end;
    -webkit-align-items: flex-end; /* Safari 7.0+ */
   }

.progress-bar-vertical .progress-bar {
     100%;
    height: 0;
    -webkit-transition: height 0.6s ease;
    -o-transition: height 0.6s ease;
    transition: height 0.6s ease;
   }
</style>

<body>
<div class="content-body-map-boat-status-bar d-flex col-4">
    <div class="bar-0 col-3 d-flex flex-column">
        <span>0℃</span>
        <div class="d-flex justify-content-center">
            <div class="progress progress-bar-vertical">
                <div class="progress-bar bg-success" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="height: 20%;">
                </div>
            </div>
        </div>
        <span>指标1</span>
    </div>
    <div class="bar-0 col-3 d-flex flex-column">
        <span>0kPa</span>
        <div class="d-flex justify-content-center">
            <div class="progress progress-bar-vertical">
                <div class="progress-bar bg-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="height: 0;">
                </div>
            </div>
        </div>
        <span>指标2</span>
    </div>
    <div class="bar-0 col-3 d-flex flex-column">
        <span>60%</span>
        <div class="d-flex justify-content-center">
            <div class="progress progress-bar-vertical">
                <div class="progress-bar bg-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="height: 60%;">
                    60%
                </div>
            </div>
        </div>
        <span>指标3</span>
    </div>
    <div class="bar-0 col-3 d-flex flex-column">
        <span>70%</span>
        <div class="d-flex justify-content-center">
            <div class="progress progress-bar-vertical">
                <div class="progress-bar bg-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="height: 70%;">
                    70%
                </div>
            </div>
        </div>
        <span>指标4</span>
    </div>
    </div>
    <div class="col-8">
    </div>
</body>

相关阅读:
又见Alice and Bob
算法7-6：图的遍历——广度优先搜索
 算法7-5：图的遍历——深度优先搜索
 水池数目
 过河问题
 括号配对问题
 C# 客户端判断是否安装office03、07或WPS
C# json
开源cms
可执行代码（Executable Code）目标代码（object code）
原文地址：https://www.cnblogs.com/lisicn/p/14251465.html