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>