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 ブートストラップ プログレス バーとバッジを揃えるには、回答をご覧ください。

問題は、プログレス バーを div に配置する必要があることですが、div はブロック要素であるため、その周囲の要素間に改行が作成されます。この動作を変更するには、周囲のもののスタイルを変更する必要があります。

左のバッジをプログレス バーとインラインで取得するには、最初のバッジにClass="pull-left"またはを追加します。Style="float: left;"

適切なバッジをインラインで取得するには、プログレス バーが画面の全幅を占有しないようにする必要があります。これにより、2 番目のバッジが下に移動します。たとえば、3 つの項目すべてが 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

*あえぎ*テーブルを使用して私自身の質問に対する解決策があります...しかし、それはコンテンツ全体を中央に保ち、バーの高さなどを変更しません.誰かがテーブル以外のバージョンを投稿できたら私はその答えは間違いなく受け入れます。

コードは次のとおりです。

<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 に答える