Twitter Bootstrap: центр текста на панели прогресса
Я использую bootstrap Twitter, и я хотел бы, чтобы текст на индикаторе выполнения был сосредоточен на панели on независимо от значения.
ссылка ниже-это то, что у меня есть сейчас. Я хотел бы, чтобы весь текст был выровнен с самой нижней панелью.
скриншоты:
Я старался изо всех сил с чистым CSS, и я пытаюсь избежать использования JS, если это возможно, но я готов принять его, если это самый чистый способ сделать это.
<div class="progress">
<div class="bar" style="width: 86%">517/600</div>
</div>
3 ответов
Bootstrap 4.0.0 с классами утилит: (спасибо 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>
Bootstrap 3:
Boostrap теперь поддерживает текст в элементе span на индикаторе выполнения. HTML, как показано в Примере Bootstrap. (Обратите внимание на класс 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 bootstrap:
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
Bootstrap 2:
вставьте это в другую таблицу стилей / ниже, где вы загружаете css bootstrap:
/**
* 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
элемент снаружи .бар:
<div class="progress">
<div class="bar" style="width: 50%"></div>
<span>Add your text here</span>
</div>
для того, чтобы он работал правильно, независимо от того, как долго ваш текст смотрите здесь
вам нужно будет взять текст из div
Bootstrap 3 Ответ, как показано в Примере bootstrap
<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>