Bootstrap Css - 带有标签的垂直对齐进度条

Question

我得到了一个带有垂直旋转组件的网站的屏幕设计，我正在尝试为其编写 css 和 html。设计如下：

当我使用引导程序时，我决定将现有的.progressbar 旋转 90 度以适应设计。

我的html如下：

<div class="progress verticalrotate">
   <div class="progress-bar green" role="progressbar" style="width:40%"></div>
   <div class="progress-bar amber" role="progressbar" style="width:10%"></div>
   <div class="progress-bar red" role="progressbar" style="width:20%"></div>
</div>

我创建了以下 css：

.verticalrotate{transform: rotate(-90deg);transform-origin: right, top;-ms-transform: rotate(-90deg);-ms-transform-origin:right, top;-webkit-transform: rotate(-90deg);-webkit-transform-origin:right, top}
.amber{background-color:#ffb800}
.green{background-color:#00ae3f}
.red{background-color:#ff2635}

我认为屏幕可能按以下方式布局：

我似乎无法获得进度条的全高（尝试将宽度硬编码为500px，但不起作用）并在网格中正确对齐（或随着窗口大小的变化而相应地改变大小）。有人知道我做错了什么吗？ :( 任何指针都非常感谢！

Answer 1

如果我理解正确，诀窍是使用width: 100vh; 代替.progress。这样.progress的宽度就是窗口的高度，所以当你旋转它时，它会占据整个高度。

演示

html, body {
  height:100%;
  position:relative;
}

.verticalrotate {
  transform: rotate(-90deg);
  transform-origin: right top;
  -ms-transform: rotate(-90deg);
  -ms-transform-origin:right top;
  -webkit-transform: rotate(-90deg);
  -webkit-transform-origin:right top
}

.progress {
  width: 100vh;  
}

.amber {
  background-color:#ffb800 !important;
}

.green {
  background-color:#00ae3f !important;
}

.red {
  background-color:#ff2635 !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="progress verticalrotate">
   <div class="progress-bar green" role="progressbar" style="width:40%"></div>
   <div class="progress-bar amber" role="progressbar" style="width:10%"></div>
   <div class="progress-bar red" role="progressbar" style="width:20%"></div>
</div>