align twitter bootstrap Fortschrittsbalken und Abzeichen

Ich benutze Twitter Bootstrap für meine Website. Ich möchte den Fortschrittsbalken verwenden, um den prozentualen Abschluss des Prozesses anzuzeigen.align twitter bootstrap Fortschrittsbalken und Abzeichen

In der Fortschrittsleiste möchte ich den Namen des Schritts in Bearbeitung anzeigen und ein Abzeichen entweder am Ende oder am Anfang der Fortschrittsleiste verwenden, um den Prozentabschluss anzuzeigen. Hier ist die Geige JS Link für das, was ich versuche,

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

Aber die baden und Fortschrittsbalken zu tun nicht nebeneinander ausgerichtet bekommen. Ich bin nicht sehr gut in CSS, also bin ich mir nicht sicher, was ich tun kann, um sie in der gleichen Reihe auszurichten.

Quelle

2012-06-03 Neel

Versuchen Sie, diese - 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>

Quelle

2012-06-03 17:06:02

perfekt funktioniert ... werde ich beim nächsten Mal „Float“ erinnern :) Danke – Neel

Es ist nicht erlaubt mir, es als eine Antwort wegen einiger Zeit Einschränkung zu markieren .. wird tun, sobald es aufgehoben wird – Neel

Von "neue PO-Detail hinzufügen" nur "Add" ist sichtbar .. – stej

align twitter bootstrap Fortschrittsbalken und Abzeichen

Antwort

Verwandte Themen