垂直多个引导进度条

Question

我的代码基于堆栈中的这个post，我想要做的是多个进度条，但不是将进度条堆叠起来，而是垂直对齐它们。

FIDDLE

HTML

<div class="progress progress-bar-vertical">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="height: 60%;">
        <span class="sr-only">60% Complete</span>
    </div>
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="height: 10%;">
        <span class="sr-only">60% Complete</span>
    </div>
    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="height: 10%;">
        <span class="sr-only">60% Complete</span>
    </div>
</div>

SASS

.progress-bar-vertical
    width: 35px
    min-height: 186px
    margin-right: 20px
    float: left
    border-radius: 10px !important
    display: -webkit-box
    display: -ms-flexbox
    display: -webkit-flex
    display: flex
    align-items: flex-end
    -webkit-align-items: flex-end

.progress-bar-vertical .progress-bar
    width: 100%
    height: 0
    -webkit-transition: height 0.6s ease
    -o-transition: height 0.6s ease
    transition: height 0.6s ease

结果

我该如何解决这个问题？

Answer 1

使用 flex 方向并将其设置为 'column-reverse' 可能是您正在寻找的内容

.progress-bar-vertical{
    display: flex;
    flex-direction: column-reverse;
 }

这是flex 的完整资源 这是一个很棒的'cheatsheet'

body{
    padding: 45px;
}
  
.progress-bar-vertical{
    width: 35px;
    min-height: 286px;
    margin-right: 20px;
    border-radius: 10px !important;
    display: flex;
    flex-direction: column-reverse;
 }   


.progress-bar-vertical .progress-bar{
    width: 100%;
    height: 0;
    -webkit-transition: height 0.6s ease;
    -o-transition: height 0.6s ease;
    transition: height 0.6s ease;
    display:block;
 }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="progress progress-bar-vertical">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="height: 60%;">
        <span class="sr-only">60% Complete</span>
    </div>
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="height: 10%;">
        <span class="sr-only">10% Complete</span>
    </div>
    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="height: 20%;">
        <span class="sr-only">20% Complete</span>
    </div>
</div>

https://codepen.io/happymacarts/pen/OjQEaJ

这里有一个替代选项，它不使用flex

还请注意，我添加了一个 transform:rotate(180deg); 以使其从下向上堆叠（有点 hacky，但它有效）

body{
    padding: 45px;
}
  
.progress-bar-vertical{
    width: 35px;
    min-height: 286px;
    margin-right: 20px;
    border-radius: 10px !important;
 }   


.progress-bar-vertical .progress-bar{
    width: 100%;
    height: 0;
    -webkit-transition: height 0.6s ease;
    -o-transition: height 0.6s ease;
    transition: height 0.6s ease;
    display:block;
 }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="progress progress-bar-vertical" style="    transform:rotate(180deg)">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="height: 60%;">
        <span class="sr-only">60% Complete</span>
    </div>
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="height: 10%;">
        <span class="sr-only">10% Complete</span>
    </div>
    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="height: 20%;">
        <span class="sr-only">20% Complete</span>
    </div>
</div>