垂直複数のブートストラッププログレスバー

Question

私のコードはStackにある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 

RESULT

どのように修正できますか？

Answer 1

フレックス方向を使用し、「列の逆」に設定すると、あなたがここで

.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

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>

別のオプションは、私はそれが下から上にスタックするために transform:rotate(180deg);を追加したことも flex

お知らせを使用しないことをここで（ちょっとハックが、それが働いていました）