75

Twitterのブートストラップを使用してきましたが、値に関係なく、プログレスバーのテキストをオンバーの中央に配置したいと思います。

以下のリンクは私が今持っているものです。すべてのテキストを一番下のバーに揃えたいです。

スクリーンショット：

プログレスバー

私は純粋なCSSで最善を尽くしており、可能な限りJSの使用を避けようとしていますが、それが最もクリーンな方法である場合は、喜んで受け入れます。

<div class="progress">
    <div class="bar" style="width: 86%">517/600</div>
</div>
4

2 に答える 2

189

ブートストラップ5: (v4xと同じ）

<div class="progress position-relative">
    <div class="progress-bar" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
    <small class="justify-content-center d-flex position-absolute w-100">60% complete</small>
</div>

ユーティリティクラスを備えたブートストラップ4 :(追加してくれたMaPePeRに感謝します）

<div class="progress position-relative">
    <div class="progress-bar" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
    <small class="justify-content-center d-flex position-absolute w-100">60% complete</small>
</div>

ブートストラップ3：

Bootstrapは、プログレスバーのスパン要素内のテキストをサポートするようになりました。Bootstrapの例で提供されているHTML。（クラスsr-onlyが削除されていることに注意してください）

HTML：

<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
        <span>60% Complete</span>
    </div>
</div>

...ただし、バー自体に従ってテキストを中央に配置するだけなので、カスタムCSSが少し必要です。

これを別のスタイルシート/ブートストラップのcssをロードする場所の下に貼り付けます。

CSS：

/**
 * Progress bars with centered text
 */

.progress {
    position: relative;
}

.progress span {
    position: absolute;
    display: block;
    width: 100%;
    color: black;
 }

JsBinファイル： http ：//jsbin.com/IBOwEPog/1/edit

ブートストラップ2：

BootstrapのCSSをロードする別のスタイルシート/下にこれを貼り付けます。

/**
 * Progress bars with centered text
 */
.progress {
    position: relative;
}

.progress .bar {
    z-index: 1;
    position: absolute;
}

.progress span {
    position: absolute;
    top: 0;
    z-index: 2;
    color: black; /* Change according to needs */
    text-align: center;
    width: 100%;
}

span次に、外部に要素を追加して、進行状況バーにテキストを追加します.bar。

<div class="progress">
    <div class="bar" style="width: 50%"></div>
    <span>Add your text here</span>
</div>

JsBin： http: //jsbin.com/apufux/2/edit

于 2013-06-26T17:32:56.023 に答える
3

ブートストラップの例に示されているように、ブートストラップ3の答え

<div class="progress text-center">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span>60% Complete</span>
  </div>
    <span>40% Left</span>
</div>
于 2013-10-31T02:13:03.490 に答える