ブートストラップのプログレスバーは、私がJsFiddleにbootstrap3と垂直プログレスバーを作成しようと、この持っている私自身のコード

Question

を再作成することはできません。私は私のファイルにすべてこのコードをコピーする場合

The result I'm looking for

をし、それを実行すると、プログレスバーは水平に中央で分割されず、代わりに垂直に分割されます。

どうすれば同じ結果が得られますか？私はここで嫌な思いをしていませんか？ここで

は私のスタイルシートのコードです：

.container { margin-top: 10px; } 

.progress { 
    width: 100px; 
    height: 300px; 
    margin: 5px; 

    position: relative; 
} 

.vertical .progress-bar { 
    -webkit-transition: height 0.3s ease; 
    -moz-transition: height 0.3 ease; 
    -o-transition: height 0.3s ease; 
    -ms-transition: height 0.3s ease; 
    transition: height 0.3s ease; 

    width: 100%; 
    height: 0; 
} 

.progress .vertical { 
    width: 100px; 
    min-height: 30px; 
    display: flex; 
    align-items: flex-end; 
    margin-right: 20px; 
    float: left; 
} 

.vertical .progress-bar-label{ 
    color: black; 
    position: absolute; 
    left: 0; 
    right: 0; 
    display: block; 
    vertical-align: middle; 
    text-align: center; 
    line-height: 300px; 
} 

Answer 1

私がそれが結果のプログレスバーをめくると協力し、再度含まれるspan要素を反転しまったようです。また、私はこのテキストに、変換も使用していることを心配しました。

結果はここで見ることができます：JsFiddle

jsfiddleリンクはいくつかのコードを必要として、ここに私の問題を解決し、その変換がある：あなたが必要な場合は

transform-origin: center; 
transform: scaleY(-1); 

はあなたのprogressとprogress-bar-labelスタイルの中に、これを使用します垂直方向に積み重ねられた下部から上部のプログレスバー。これがなければプログレスバーは上から下に移動します。