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

我已经给出了一个网站的屏幕设计，其中包含一个垂直旋转的组件，我正在尝试为其编写CSS和HTML。该设计如下：Bootstrap Css - 带标签的垂直对齐的进度条

由于我使用的引导，我决定通过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}

我看到以下列方式为潜在布局屏幕：

我似乎无法得到进度栏全高（试过har d编码宽度为500px，但不起作用），并正确对齐网格（或响应地改变窗口大小改变的大小）。任何人有任何想法我做错了什么？ :(任何指针不胜感激！

来源

2016-03-09 Rob McCabe

为什么你要旋转该元素？这不是真的有必要实现你想要的，我认为... – Roy

不是 - 不是真的！ :-)如果你碰巧知道任何东西，我宁愿选择不旋转的解决方案！ –

查看另一个问题：http://stackoverflow.com/questions/16318375/how-to-align-vertically-a-progress-bar-in-twitter-bootstrap – Roy

如果我理解正确的话，唯一的办法就是使用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>

来源

2016-03-09 16:48:41

工作灿烂！非常感谢！ –

我的荣幸;）祝你好运。 –

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

回答

相关问题