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进度条和徽章

回答

相关问题