Question

我正在为我的网站使用twitter bootstrap。我想使用进度条指示该过程的完成百分比。

在进度条中，我想显示正在处理的步骤的名称，并在进度条的结尾或开始处使用徽章来显示完成百分比。这是我试图做的JS小提琴链接

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

但是bade和进度条并没有并排排列。我不是很擅长CSS，所以我不知道我能做些什么来将它们排成一行。

Answer 1

试试这个 - 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>

对齐twitter bootstrap进度条和徽章

1 个答案: