左侧和右侧带有徽章的Twitter Bootstrap ProgressBar

Question

我想有一个左右对齐徽章的进度条，它位于行液体的中心。

与此类似：

到目前为止，这是我的工作。

<div class='row-fluid'>
   <div class="span12" style="">
      <span class="badge" style="position: relative;">X</span>
      <div class="progress" style="position: relative; margin: 0 auto;width:50%;">
         <div class="bar" style="width:10%;"></div>
      </div>
      <span class="badge" style="position: relative;">0</span>
   </div>
</div> 

Answer 1

查看align twitter bootstrap progress bar and badge的答案。

问题是progress bar必须放在div中，但div是一个块元素，因此它会在它周围的元素之间创建一个换行符。要改变这种行为，你必须改变它周围事物的风格。

要使左侧徽章与进度条内联，请在第一个徽章中添加Class="pull-left"或Style="float: left;"。

要获得内联的正确徽章，您必须确保进度条不会占据屏幕的整个宽度，这会将第二个徽章撞到底部。例如，如果所有三个项都在类span8的div中，则仅使进度条具有span6。

Demo in jsFiddle

<div class="span8">
    <span class="badge pull-left">X</span>
    <div class="progress span6" >
        <div class="bar" style="width:10%;"></div>
    </div>
    <span class="badge">0</span>
</div>

Answer 2

我有一个解决我自己的问题，使用* gasp *一个表...但它确实保持整个内容的中心，并不会改变栏的高度，等等。如果有人可以发布非表格我肯定会接受这个答案。

以下是代码：

<div class='row-fluid'>
    <div class="span12">
        <table style="width: 80%;margin:0 auto;">
            <tr>
                <td style="width: 15%;padding-right:3px;">
                    <span class="badge" style="float:right;">X:</span>
                </td>
                <td style="width: 70%;">
                    <div class="progress" style="margin-bottom: 0px;">
                        <div  id="xbar" class="bar" style="width: 50%;"></div>
                    </div>
                </td>
                <td style="width: 15%;padding-left:3px;">
                    <span id="xval" class="badge" style="float:left;">0</span>
                </td>
            </tr>
        </table>
    </div>
</div>