Bootstrap 3进度条百分比将显示在其下方(Bootstrap 3 progress bar percentages to be displayed under it)
这是默认的bootstrap堆叠进度条。 我希望能够在白色空间中显示进度条下的百分比而不是它。
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <div class="progress"> <div class="progress-bar progress-bar-danger" role="progressbar" style="width:13%">13%</div> <div class="progress-bar progress-bar-warning" role="progressbar" style="width:7%">7%</div> <div class="progress-bar progress-bar-success" role="progressbar" style="width:80%">80%</div> </div>谢谢您的帮助。
This is the default bootstrap stacked progress bar. I would like to be able to show the percentages under the progress bar in white space instead of on it.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <div class="progress"> <div class="progress-bar progress-bar-danger" role="progressbar" style="width:13%">13%</div> <div class="progress-bar progress-bar-warning" role="progressbar" style="width:7%">7%</div> <div class="progress-bar progress-bar-success" role="progressbar" style="width:80%">80%</div> </div>Thanks for the help.
最满意答案
简单地把它放在新的div中,添加一些样式,你就完成了。 例:
.progress-desc { margin-top: -1.5em; } .progress-desc div { display: block; float: left; text-align: center; }<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <div class="progress"> <div class="progress-bar progress-bar-danger" role="progressbar" style="width:13%"></div> <div class="progress-bar progress-bar-warning" role="progressbar" style="width:7%"></div> <div class="progress-bar progress-bar-success" role="progressbar" style="width:80%"></div> </div> <div class="progress-desc"> <div style="width:13%">13%</div> <div style="width:7%">7%</div> <div style="width:80%">80%</div> </div>Simply put it in new div, add some styling and you're done. example:
.progress-desc { margin-top: -1.5em; } .progress-desc div { display: block; float: left; text-align: center; }<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <div class="progress"> <div class="progress-bar progress-bar-danger" role="progressbar" style="width:13%"></div> <div class="progress-bar progress-bar-warning" role="progressbar" style="width:7%"></div> <div class="progress-bar progress-bar-success" role="progressbar" style="width:80%"></div> </div> <div class="progress-desc"> <div style="width:13%">13%</div> <div style="width:7%">7%</div> <div style="width:80%">80%</div> </div>
更多推荐
发布评论