Wie wird eine Fortschrittsleiste in Twitter Bootstrap vertikal ausgerichtet?

Question

Ich benutze die progressbar control of twitter-bootstrap.

ich möchte es vertikal ausrichten, wie im folgenden Bild sehen:

ich this thread gefunden, aber ich fürchte, es jetzt nicht funktioniert.

So mache ich das: 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; 
} 

Haben Sie eine Spitze oder Ratschläge um es zu bekommen? Wenn Sie weitere Informationen benötigen, lassen Sie es mich wissen und ich werde den Beitrag bearbeiten.

Answer 1

Bootstrap 2

Hinweis ist dies eine Lösung für Bootstrap 2:

Breite 100%, Höhengröße:

<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+

ich Sie möchten siehe others comments on this page

Answer 2

Ändern der Twitter Bootstrap Pro gress bar und Animation von der horizontalen Position in die vertikale Position

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

---

---

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; } 

---

Die Datei Twitter Ändern bootstrap.css wie unten angegeben:

 @-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 zu repeat-y und die Grade zu 0deg.so, dass die Animation macht vertikal

.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); 
} 

---

Folgen das gleiche mit den anderen Fortschritt Typen wie Erfolg, Warnung usw. und vertikale twitter erreichen Bootstrap Fortschrittsbalken und Animationen ...!

Für Sie Fragen haben, lassen Sie mich wissen, ich kann Ihnen helfen ..!

Wenn jemand da draußen eine optimierte Lösung hat dann lass es mich wissen ..!

Vergessen Sie nicht, diese Lösung zu unterstützen ..!

Viel Spaß!

Answer 3

wird diese Arbeit:

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

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

Answer 4

Bootstrap 3 und 4 Bootstrap Lösung.

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

Ich kämpfte mit für eine Weile eine gute Lösung für dieses Problem zu finden. Letztendlich schrieb ich meine eigene, die semantisch ähnlich ist wie Bootstrap ihre Fortschrittsbalken strukturiert.

Diese Lösung verwendet auch nicht transform, die ich fand wirklich eine Menge Dinge mit der Positionierung bei der Verwendung vermasselt. Ganz zu schweigen davon, dass es damit verwirrend wurde.

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; 
} 

Abstimmung, wenn dies hilfreich war!