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 - 帶標籤的垂直對齊的進度條

回答

相關問題