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

Question

我正在使用twitter-bootstrap的进度条控件.

我想垂直对齐它,如下图所示:

我找到了这个帖子,但我担心它现在不起作用了.

所以我这样做: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;
}

你有任何提示或建议吗？如果您需要更多信息,请告诉我,我会编辑帖子.

Answer 1

Bootstrap 3和Bootstrap 4解决方案.

演示:https://jsfiddle.net/elijahmurray/7tgh988z/

我努力寻找一个解决这个问题的好方法一段时间.最终,我最终编写了自己的语法,类似于Bootstrap如何构建其进度条.

这个解决方案也没有使用transform,我发现在使用它时,它确实搞砸了很多关于定位的东西.更不用说,它只是让人感到困惑.

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

如果这有用,请投票!

Answer 2

Bootstrap 2

请注意,这是bootstrap 2的解决方案:

宽度100%,高度变量:

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

我希望您参考本页面上的其他评论

Answer 3

这将工作：

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

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