1. Inicio
  2. Pregunta y respuesta
  3. alinear la barra de progreso de twitter bootstrap y la insignia

alinear la barra de progreso de twitter bootstrap y la insignia

2012-06-03 16 views
5

Estoy usando twitter bootstrap para mi sitio. Me gustaría utilizar la barra de progreso para indicar el porcentaje de finalización del proceso.alinear la barra de progreso de twitter bootstrap y la insignia

En la barra de progreso, quiero mostrar el nombre del paso en proceso y usar una insignia al final o al inicio de la barra de progreso para mostrar el porcentaje completado. Aquí está el enlace violín de JS para lo que yo estoy tratando de hacer

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

Pero el Bade y barra de progreso no queden alineados lado a lado. No soy muy bueno en CSS así que no estoy seguro de lo que puedo hacer para alinearlos en la misma fila.

Fuente

2012-06-03 Neel

Respuesta

9

Prueba esto - 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>​

Fuente

2012-06-03 17:06:02

+0

funcionó a la perfección ... Voy a recordar la próxima vez "flotar" :) Gracias – Neel

+0

No me está permitiendo marcarla como una respuesta debido a alguna restricción de tiempo .. se hazlo una vez que se haya levantado – Neel

+0

Desde "Agregar nuevo detalle de PO", solo está disponible "Agregar". – stej

Cuestiones relacionadas

 Cuestiones relacionadas