问题
I am using twitter bootstrap for my site. I would like to use progress bar to indicate the percentage completion of the process.
In the progress bar I want to display the name the step in process and use a badge either at the end or start of progress bar to display the percent complete. Here is the JS fiddle link for what I am trying to do
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 -->
But the bade and progress bar don't get aligned side by side. I am not very good at css so I am not sure what I can do to align them in the same row.
回答1:
Try this - 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>
来源：https://stackoverflow.com/questions/10872248/align-twitter-bootstrap-progress-bar-and-badge