2

我想有一个进度条，两边都有左右对齐的徽章，在行流体中居中。

与此类似：

这是我到目前为止没有工作的内容。

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

2 回答 2

2

查看对齐 twitter bootstrap 进度条和徽章的答案。

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

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

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

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>
于 2013-07-11T18:30:44.280 回答
1

我有一个使用 *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>
于 2013-07-12T15:03:54.207 回答