如何垂直对齐进度条在Twitter Bootstrap？

问题描述

我正在使用，但我恐怕它现在不工作。

：

HTML

 < br> 
< div class =progress vertical> 
< div class =bar bar-successstyle =width：70％;>< / div> 
< div class =bar bar-warningstyle =width：20％;>< / div> 
< div class =bar bar-dangerstyle =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; 
} 
  

您有任何提示或建议吗？

解决方案

Bootstrap 2

$ b如果您需要更多信息，请与我们联系。
$ b

注意这是bootstrap 2的解决方案：

width 100％，height变量：

 < br> 
< div class =progress vertical> 
< div class =bar bar-successstyle =height：70％; width：100％>< / div> 
< div class =bar bar-warningstyle =height：20％; width：100％>< / div> 
< div class =bar bar-dangerstyle =height：10％; width：100％>< / div> 
< / div> 
  

Bootstrap 3 +

喜欢您参考

I'm using the progressbar control of twitter-bootstrap.

I want to align it vertically to look like in the following image:

I found this thread, but I'm afraid it does not work now.

So I do this: 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;
}

Do you have any tip or advice to get it? If you need more info, let me know and I'll edit the post.

解决方案

Bootstrap 2

Note this is a solution for bootstrap 2:

width 100%, height variable:

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

I'd like you to refer to the others comments on this page

这篇关于如何垂直对齐进度条在Twitter Bootstrap？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！