Question

我的代码基于Stack中的post，我想要做的是一个多进度条，但不是将进度条堆叠起来，而是垂直对齐它们。

HTML

<div class="progress progress-bar-vertical">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="height: 60%;">
        <span class="sr-only">60% Complete</span>
    </div>
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="height: 10%;">
        <span class="sr-only">60% Complete</span>
    </div>
    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="height: 10%;">
        <span class="sr-only">60% Complete</span>
    </div>
</div>

SASS

.progress-bar-vertical
    width: 35px
    min-height: 186px
    margin-right: 20px
    float: left
    border-radius: 10px !important
    display: -webkit-box
    display: -ms-flexbox
    display: -webkit-flex
    display: flex
    align-items: flex-end
    -webkit-align-items: flex-end

.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

RESULT

我该如何解决？

Answer 1

使用弯曲方向并将其设置为“反向 - 反向”。很可能是你在找什么

CLUSHUBS

以下是flex的完整资源这是一个很棒的'cheatsheet'

＆＃13;

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

＆＃13;

body{
    padding: 45px;
}
  
.progress-bar-vertical{
    width: 35px;
    min-height: 286px;
    margin-right: 20px;
    border-radius: 10px !important;
    display: flex;
    flex-direction: column-reverse;
 }   


.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;
    display:block;
 }

＆＃13;

＆＃13; https://codepen.io/happymacarts/pen/OjQEaJ

此处的替代选项不使用<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="progress progress-bar-vertical"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="height: 60%;"> <span class="sr-only">60% Complete</span> </div> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="height: 10%;"> <span class="sr-only">10% Complete</span> </div> <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="height: 20%;"> <span class="sr-only">20% Complete</span> </div> </div>

另请注意，我添加了flex以使其自下而上堆叠（有点hacky，但它有效）

＆＃13;

transform:rotate(180deg);

＆＃13;

body{
    padding: 45px;
}
  
.progress-bar-vertical{
    width: 35px;
    min-height: 286px;
    margin-right: 20px;
    border-radius: 10px !important;
 }   


.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;
    display:block;
 }

＆＃13;

垂直多个Bootstrap进度条

1 个答案: