对齐Twitter Bootstrap进度栏和徽章 [英] align twitter bootstrap progress bar and badge
本文介绍了对齐Twitter Bootstrap进度栏和徽章的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在我的网站上使用Twitter Bootstrap.我想使用进度条指示该过程的完成百分比.
I am using twitter bootstrap for my site. I would like to use progress bar to indicate the percentage completion of the process.
在进度条中，我要显示正在执行的步骤的名称，并在进度条的末尾或开始处使用徽标以显示完成百分比.这是我想要做的JS小提琴链接
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
<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 -->
但是，徽章和进度条并没有对齐.我不太擅长使用CSS，因此不确定如何将它们对齐在同一行中.
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.
推荐答案
尝试一下- http://jsfiddle.净/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>
这篇关于对齐Twitter Bootstrap进度栏和徽章的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
