Question

我正在尝试在引导程序的进度条旁边的and之前添加一些文本。我希望它看起来的方式如下：

<div class="project-container">               
<h4 class="progress-label">Java</h4>    
  <div class="progress">
    <div class="bar"
       style="width: 60%;">         
    </div>
    </div>  
</div>

http://cssdeck.com/labs/ymqkhury

Answer 1

只需创建一个左侧浮动的inline元素

<强> Example

您还可能希望将条形高度增加到18像素以匹配标题和条形。或者减少标题的line-height。

Answer 2

围绕它做一张桌子：

<center>
                  <div style=max-width:460px;>

                                <div class="row">
                                <div class=col-xs-12>

                                <p>
                                    <span class="pull-left"><strong>3456 Punti Esperienza</strong></span>
                                    <span class="pull-right text-muted">20% Completato</span>
                                </p>
                                </div>
                                </div>
                                <div class=row>
                                <div class="col-xs-1">
                                <span class="label label-primary">Liv. 4</span>
                                </div><div class=col-xs-10>
                                <div class="progress progress-striped active">
                                    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
                                        <span class="sr-only">20% Complete</span>
                                    </div>
                                </div>
                                </div>
                                <div class="col-xs-1">
                                <span class="label label-success pull-right">Liv. 5</span>
                                </div>
                                </div>
                            </div>
                            </center>

请参阅此处的示例http://jsfiddle.net/00gftvkm/

如何在进度条引导程序之前和旁边添加文本？

2 个答案: