ブートストラップのプログレスバーでバーの外にラベルを表示する時の問題

Bootstrap v4.0.0からプログレスバー(進捗バー)が追加されました
概ね良好なのですが、0%の時はバーが表示されないのでそもそも設定したラベルが見えません
そのため表示するラベルをバーの外に設定したのですが、やや上の方に表示されてしまう不具合に遭遇しました

なお公式ページ通りの指定方法でやっても、そもそも公式ページのデモすら表示がおかしいのでBootstrap側のバグだと思われます
このバグの対処方法について紹介します
状況確認と修正方法

<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
<span class="ml-1">進捗率:0%</span>
</div>
このように、公式サイトに記載されてる通りの方法で実装すると「進捗率:0%」の文字が上の方で見切れてしまいます
修正

<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
<span class="ml-2 mt-3">進捗率:0%</span>
</div>
このようにラベル部分のマージンを調整することで、真ん中にラベルを持ってくることができます
ディスカッション
コメント一覧
まだ、コメントがありません
みんながLoadingしてる記事
新たにPostされた記事
: JS
Dropzone.jsで編集画面を作る(アップロード済みの画像を表示)
前回からの続きです Dropzone.jsを使って画像アップロードの編集画面を作 ...: Laravel
LaravelでDBテーブルをupdateした時に、同時に更新した値を取得する裏技[Laravel8]
通常Eloquentのsaveやupdateでは、実行時に更新した値の結果を返し ...: JS
忘れがちなJqueryのあれやこれ
Jqueryって何でこんなに忘れやすいのでしょうか 呪文にかかったくらい覚えられ ...: 資格
理系エンジニアの僕がTOEICで800点をとるためにした勉強
先日、TOEIC L&R テストで800点を超えました 今回は理系エンジ ...: Laravel
[Laravel8]npm run devが失敗する場合の解決法
Laravel8にJetstreamをインストールする際、npm run dev ...HashMap
Created by
はやぴ
Web/アプリ開発エンジニア
Sierにてお堅いB向けのソフトウェア開発を経て、現在はC向けのWebやアプリを中心に開発しています。
そのほか