Question

我试图在JsFiddle上使用bootstrap3创建垂直进度条，并得到了这个：

如果我将所有这些代码复制到我的文件中并运行它，那么进度条不会在水平方向中间分割，而是垂直分割。

如何获得相同的结果？我在这里错过了什么吗？

以下是我的样式表的代码：

.container { margin-top: 10px; }

.progress {
    width: 100px;
    height: 300px;
    margin: 5px;

    position: relative;
}

.vertical .progress-bar {
    -webkit-transition: height 0.3s ease;
    -moz-transition: height 0.3 ease;
    -o-transition: height 0.3s ease;
    -ms-transition: height 0.3s ease;
    transition: height 0.3s ease;

    width: 100%;
    height: 0;
}

.progress .vertical {
    width: 100px;
    min-height: 30px;
    display: flex;
    align-items: flex-end;
    margin-right: 20px;
    float: left;
}

.vertical .progress-bar-label{
    color: black;
    position: absolute;
    left: 0;
    right: 0;
    display: block;
    vertical-align: middle;
    text-align: center;
    line-height: 300px;
}

Answer 1

似乎我让它工作，翻转生成的进度条，然后再次翻转包含的span元素。此外，我还找到了这个文本中心，它也使用了变换。

结果可以在这里看到：JsFiddle

由于jsfiddle链接需要一些代码，这里是解决我的问题的转换：

transform-origin: center;
transform: scaleY(-1);

如果您需要垂直堆叠的自下而上的进度条，请在progress和progress-bar-label样式中使用此选项。如果没有这个，你的进度条将自上而下。

Bootstrap进度条 - 无法使用我自己的代码重新创建

1 个答案: