allinea barra di progresso e badge bootstrap di twitter

Sto utilizzando twitter bootstrap per il mio sito. Vorrei utilizzare la barra di avanzamento per indicare il completamento percentuale del processo.allinea barra di progresso e badge bootstrap di twitter

Nella barra di avanzamento, voglio visualizzare il nome della fase in corso e utilizzare un badge alla fine o all'inizio della barra di avanzamento per visualizzare la percentuale di completamento. ecco il link violino JS per quello che sto cercando di fare

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

Ma la Bade e barra di avanzamento non vengono allineati uno accanto all'altro. Non sono molto bravo in css quindi non sono sicuro di cosa posso fare per allinearli nella stessa riga.

fonte

2012-06-03 Neel

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

fonte

2012-06-03 17:06:02

ha funzionato perfettamente ... mi ricorderò la prossima volta "Float" :) Grazie – Neel

Non è mi permette di segnare come una risposta a causa di alcune restrizioni di tempo .. sarà fare una volta che viene sollevato – Neel

Da "Aggiungi nuovo dettaglio PO" solo "Aggiungi" è visibile .. – stej

allinea barra di progresso e badge bootstrap di twitter

risposta

Problemi correlati