CSS 如何在 Twitter Bootstrap 中垂直对齐进度条？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16318375/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to vertically align a progress bar in Twitter Bootstrap?
提问by harrison4
I'm using the progressbar control of twitter-bootstrap.
我正在使用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
所以我这样做：http: //tinker.io/e69ff/2
HTML
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
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.
你有什么提示或建议吗？如果您需要更多信息，请告诉我，我会编辑帖子。
采纳答案by Joel Harkes
Bootstrap 2
引导程序 2
Note this is a solution for bootstrap 2:
请注意，这是引导程序 2 的解决方案：
width 100%, height variable:
宽度 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+
引导程序 3+
I'd like you to refer to the others comments on this page
回答by Elijah Murray
Bootstrap 3 and Bootstrap 4 solution.
Bootstrap 3 和 Bootstrap 4 解决方案。
Demo: https://jsfiddle.net/elijahmurray/7tgh988z/
演示：https: //jsfiddle.net/elijahmurray/7tgh988z/
I struggled with finding a good solution to this problem for awhile. Ultimately, I ended up writing my own that is semantically similar to how Bootstrap structures their progress bars.
一段时间以来，我一直在努力寻找解决这个问题的好方法。最终，我最终编写了自己的，在语义上类似于 Bootstrap 构建进度条的方式。
This solution also doesn't use transform, which I found really messed up a lot of things with positioning when using it. Not to mention, it just got confusing with that.
这个解决方案也没有使用transform，我发现在使用它时我发现定位确实搞砸了很多事情。更不用说，它只是对此感到困惑。
HTML
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
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;
}
Vote if this was helpful!
如果这有帮助，请投票！
回答by mcgraw
回答by WhitehatK
Changing the twitter bootstrap progress bar and animation from horizontal position to vertical position
将 twitter bootstrap 进度条和动画从水平位置更改为垂直位置
========================================================================
================================================== ======================
HTML
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
CSS
.progress-vertical {
position: relative;
width: 40px;
min-height: 240px;
float: left;
margin-right: 20px; }
Modify The Twitter bootstrap.css file as specified below:
修改 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;
}
}
Change background-repeat to repeat-yand the degrees to 0deg. so, that the animation renders vertically
将 background-repeat 更改为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);
}
Follow the same with the other progress types like success,warning etc and achieve vertical twitter bootstrap progress bars and animations...!
与其他进度类型（如成功、警告等）相同，并实现垂直 twitter 引导进度条和动画......！
For you have any queries let me know I may help you..!
如果您有任何疑问，请告诉我我可以帮助您..！
If any one out there have any optimized solution than this then please let me know..!
如果有人有比这更优化的解决方案，那么请告诉我..！
Don't forget to support this solution..!
不要忘记支持这个解决方案..！
Enjoy!
享受！
