Bootstrap Css - 垂直对齐的进度条，标签为

Question

我已经为具有垂直旋转组件的网站提供了屏幕设计，我正在尝试编写css和html。设计如下：

当我使用bootstrap时，我决定通过将其旋转90度来自定义现有.progressbar以适应设计。

我的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的宽度将成为窗口的高度，因此当您旋转它时，它将占据整个高度。

<强>演示

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;