align twitter bootstrap progress bar and badge

Я использую twitter bootstrap для своего сайта. Я хотел бы использовать индикатор выполнения, чтобы указать процентное завершение процесса.align twitter bootstrap progress bar and badge

В строке выполнения я хочу отобразить имя, которое находится в процессе, и использовать значок либо в конце, либо в начале строки выполнения, чтобы отобразить процент завершения. Вот скрипка ссылка JS для того, что я пытаюсь сделать

http://jsfiddle.net/KBTy7/12/

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

Но Bade и прогресс бар не получают выровнены бок о бок. Я не очень хорошо разбираюсь в 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

Из «Добавить новую деталь PO» можно увидеть только «Добавить». – stej

align twitter bootstrap progress bar and badge

ответ

Смежные вопросы