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

Question

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

csstwitter-bootstrap

16

我正在使用Twitter Bootstrap的进度条控件。

我想要将它垂直对齐，使之看起来像下面的图片：

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

你有没有获取它的任何提示或建议？如果需要更多信息，请告诉我，我会编辑帖子。

- mllamazares

我不知道确切的答案，所以我只是在评论，但从逻辑上讲，您可以将div设置为高度，然后在代码中使用高度而不是宽度。 - Marco Geertsma

6个回答

10

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+

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

- Joel Harkes

2

这个解决方案不适用于 Twitter-Bootstrap 3。没有 vertical 这个类。另外，你评论中的链接已经失效了。 - user3281466

7

这将起作用：

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

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

- MCGRAW

这个很好用，但同样重要的是也要设置transform-origin CSS属性。如果不设置它，它将居中对齐，在这个例子中效果很好，但如果你想要左对齐，从左上角开始，那就不行了。你需要：transform-origin: top left; - No Spam

2

将 Twitter Bootstrap 进度条和动画从水平位置更改为垂直位置

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

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

按照以下规定修改Twitter bootstrap.css文件：

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

将背景重复属性更改为 repeat-y，角度更改为 0deg。这样，动画就能垂直渲染了。

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

跟其他进度类型（如success、warning等）一样，实现垂直的Twitter Bootstrap进度条和动画...！

如果您有任何问题，请告诉我，我可以帮助您...！

如果有人有比这更优化的解决方案，请让我知道...！

不要忘记支持这个解决方案...！

享受吧！

- WhitehatK

0

在主进度类中添加以下内容：

.progress{
     display: flex;
     flex-direction: column-reverse;
}

- Wraith King

如果元素不是一个弹性项，那么flex-direction属性就没有效果。请加上"display: flex;"以使其生效。 - 0xe1λ7r

是的，你说得对。已经编辑了答案。 - Wraith King

-1

CSS

.progress{
position: absolute;left:50.5%;top:40%;width: 2.5%;height:50%;opacity: 0.8; filter: alpha(opacity=80);
}
.progress-bar{
  position:absolute;top:20%; width: 100%;height: 80%;
}

查看完整的代码和实现在这里

- Nicket Singh

1

早上好。您的链接似乎已经损坏了。 - Robert Columbia

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Elijah Murray · Accepted Answer

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

如果这篇文章对你有帮助，请投票！