twitter-bootstrap 如何将 twitter bootstrap 进度条从水平更改为垂直
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17747542/
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 change the twitter bootstrap progressbar from horizontal to vertical
提问by WhitehatK
I want to use twitter bootstrap progressbar in vertical format i.e, +90Degrees.
我想以垂直格式使用 twitter bootstrap 进度条，即 +90Degrees。
采纳答案by WhitehatK
And finally i figured it out!
最后我想通了！
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!
享受！
回答by mcgraw
you can use transform: rotate(-90deg) on the .progress element - worked for me. http://codepen.io/mcg73/pen/eCwvu/
您可以在 .progress 元素上使用 transform: rotate(-90deg) - 对我有用。http://codepen.io/mcg73/pen/eCwvu/
the markup:
标记：
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="90"></div>
</div>
the css that rotates the element:
旋转元素的css：
.progress{
width: 100px;
height: 100px;
border-radius: 100%;
transform: rotate(-90deg);
}
回答by adamdehaven
Try this:
试试这个：
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;
}
HTML
HTML
<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>
