Come allineare verticalmente una barra di avanzamento in Bootstrap su Twitter?

Question

Sto usando il progressbar control of twitter-bootstrap.

Voglio allinearlo verticalmente per apparire come nell'immagine seguente:

ho trovato this thread, ma ho paura che non funziona ora.

Così faccio questo: http://tinker.io/e69ff/2

HTML

<br> 
<div class="progress vertical"> 
    <div class="bar bar-success" style="width: 70%;"></div> 
    <div class="bar bar-warning" style="width: 20%;"></div> 
    <div class="bar bar-danger" style="width: 10%;"></div> 
</div> 

CSS

.progress.vertical { 
    position: relative; 
    width: 20px; 
    min-height: 240px; 
    float: left; 
    margin-right: 20px; 
    background: none; 
    -webkit-box-shadow: none; 
    -moz-box-shadow: none; 
    box-shadow: none; 
    border: none; 
} 

Avete qualche suggerimento o consiglio per ottenerlo? Se hai bisogno di maggiori informazioni, fammelo sapere e modifico il post.

Answer 1

Bootstrap 2

Nota che questa è una soluzione per bootstrap 2:

larghezza 100%, variabile in altezza:

<br> 
<div class="progress vertical"> 
    <div class="bar bar-success" style="height: 70%;width:100%"></div> 
    <div class="bar bar-warning" style="height: 20%;width:100%"></div> 
    <div class="bar bar-danger" style="height: 10%;width:100%"></div> 
</div> 

Bootstrap 3+

Mi piacerebbe che fare riferimento a others comments on this page

Answer 2

Cambiare il twitter bootstrap pro bar gresso e animazione dalla posizione orizzontale alla posizione verticale

==================================== ====================================

---

---

HTML

---

<div class="progress progress-vertical progress-striped active progress-success"> 
    <div class="bar" style="width: 40px;"></div> 
</div> 
<div class="progress progress-vertical progress-striped active progress-danger"> 
    <div class="bar" style="width: 40px;"></div> 
</div> 

---

CSS

---

.progress-vertical { 
position: relative; 
width: 40px; 
min-height: 240px; 
float: left; 
margin-right: 20px; } 

---

modificare il file bootstrap.css Twitter come di seguito specificato:

 @-webkit-keyframes progress-bar-stripes { 
    from { 
    background-position: 0 40px; 
    } 
    to { 
    background-position: 0 0; 
    } 
} 
@-moz-keyframes progress-bar-stripes { 
    from { 
    background-position: 0 40px; 
    } 
    to { 
    background-position: 0 0; 
    } 
} 
@-ms-keyframes progress-bar-stripes { 
    from { 
    background-position: 0 40px; 
    } 
    to { 
    background-position: 0 0; 
    } 
} 
@-o-keyframes progress-bar-stripes { 
    from { 
    background-position: 0 0; 
    } 
    to { 
    background-position: 0 40px; 
    } 
} 
@keyframes progress-bar-stripes { 
    from { 
    background-position: 0 40px; 
    } 
    to { 
    background-position: 0 0; 
    } 
} 

---

Change background-repeat per repeat-y ei gradi di 0deg.così, che l'animazione rende verticalmente

.progress-danger .bar, 
    .progress .bar-danger { 
     background-repeat: repeat-y; 
     } 

.progress-danger.progress-striped .bar, 
.progress-striped .bar-danger { 
    background-color: #ee5f5b; 
    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); 
    background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); 
    background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); 
    background-image: -o-linear-gradient(0deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); 
    background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); 
} 

---

Seguire lo stesso con gli altri tipi di progresso, come il successo, avvertendo ecc e ottenere Twitter Bootstrap verticale barre di avanzamento e animazioni ...!

Per qualsiasi dubbio fatemi sapere che posso aiutarvi ..!

Se qualcuno là fuori ha una soluzione ottimizzata di questo, per favore fatemelo sapere ..!

Non dimenticare di supportare questa soluzione ..!

Divertiti!

Answer 3

questo funzionerà:

.progress{ 
    transform: rotate(-90deg); 
} 

http://codepen.io/mcgraw/pen/eCwvu

Answer 4

Bootstrap 3 e 4 Bootstrap soluzione.

Demo: https://jsfiddle.net/elijahmurray/7tgh988z/

ho faticato a trovare una buona soluzione a questo problema per un po '. Alla fine, ho finito per scrivere il mio che è semanticamente simile a come Bootstrap struttura le barre di avanzamento.

Questa soluzione inoltre non utilizza transform, che ho trovato davvero un sacco di cose con il posizionamento quando lo si utilizza. Per non parlare, è solo diventato confuso con quello.

HTML

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

CSS

.progress-bar-vertical { 
    width: 20px; 
    min-height: 100px; 
    margin-right: 20px; 
    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 { 
    width: 100%; 
    height: 0; 
    -webkit-transition: height 0.6s ease; 
    -o-transition: height 0.6s ease; 
    transition: height 0.6s ease; 
} 

voto se questo è stato utile!