如何在带有引导程序的进度条旁边放置标签? [英] How to put a label side by a progress bar with bootstrap?
本文介绍了如何在带有引导程序的进度条旁边放置标签?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我希望这样设置这些标签:
I want these labels setted up like this:
Java ---------进度条-------------
Java ---------Progress bar-----------
C#---------进度条-------------
C# ---------Progress bar-----------
这是我当前的代码:
<div class="container">
<p>
C#
</p>
<div class="progress" id="prog1">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">20% Complete</span>
</div>
</div>
</div>
推荐答案
使用float
和margin
.progress-label {
float: left;
margin-right: 1em;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<p class="progress-label">
C#
</p>
<div class="progress" id="prog1">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">20% Complete</span>
</div>
</div>
</div>
这篇关于如何在带有引导程序的进度条旁边放置标签?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文