align twitter bootstrap進度條和徽章

我爲我的網站使用twitter bootstrap。我想用進度條來表示完成過程的百分比。align twitter bootstrap進度條和徽章

在進度條中，我想顯示正在處理的步驟的名稱，並在進度條的末尾或開始處使用徽章來顯示完成百分比。這裏是JS提琴鏈接什麼，我試圖做

<div id="coolstuff" style="margin-top: 10px;"> 
    <span class="badge" style="padding: 3px; width: 10px">10%</span> 
    <div class="progress" id="prgbar"> 
     <div title="PO Details" class="bar" style="width: 20%;" id="prgwidth">Add New PO Detail</div> 
    </div><!-- end of progress bar --> 
</div> <!-- end of cool stuff -->

但八德和進度條沒有得到並排延伸。我不是很擅長css，所以我不確定我能做些什麼來將它們排列在同一行。

來源

2012-06-03 Neel

試試這個 - http://jsfiddle.net/KBTy7/412/

<html> 
    <body> 
     <div id="coolstuff" style="margin-top: 10px;"> 
      <span class="badge" style="padding: 3px; float: left; width: 25px; text-align: center;">10%</span> 
      <div class="progress" id="prgbar"> 
       <div title="PO Details" class="bar" style="width: 20%;" id="prgwidth"> Add New PO Detail </div> 
      </div><!-- end of progress bar --> 
     </div> <!-- end of cool stuff --> 
    </body> 
</html>

來源

2012-06-03 17:06:02

完美地工作......我會記得「浮動」 :)謝謝 – Neel

這不是讓我把它標記爲一個答案，因爲一些時間限制的下一次會..做一旦它被解除 – Neel

從「添加新的採購訂單明細」只有「添加」是可見的.. – stej

align twitter bootstrap進度條和徽章

回答

相關問題