twitter-bootstrap 如何在进度条引导程序旁边添加文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21396214/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add text next to progress bar bootstrap?
提问by Abhishek Dewan
Hi I am trying to add some text to a progress bar in bootstrap. The way I want it to look is the follow:
嗨，我正在尝试向引导程序中的进度条添加一些文本。我希望它的外观如下：
Java: x-x-x-x-x-x-x-x-x-
爪哇：xxxxxxxxx-
C++ : x-x-x-x-x-x-x-x-x-
C++：xxxxxxxxx-
where x-x-x-x-x-x-x-x-x- is the progress bar.
其中 xxxxxxxxx- 是进度条。
I have written some code but I can't seem to get the text inline with the progress bar. Any help would be useful. I am using just bootstrap.
我已经编写了一些代码，但似乎无法将文本与进度条内联。任何帮助都会有用。我只使用引导程序。
<div class="panel panel-default" style="height:500px;overflow:scroll">
<div class ="panel panel-primary">
<div class="panel-heading">
<h4>Programming Proficiency</h4>
</div>
<div class="panel-body">
<div class="alert alert-info">
<div class="container">
<p><h4>Java</h4><div class="progress col-md-2"></div></p>
</div>
</div>
</div>
</div>
</div>
回答by guli
You can fix this by CSS rules on the H4 label.
您可以通过 H4 标签上的 CSS 规则解决此问题。
Change HTML to this :
将 HTML 更改为：
<h4 class="progress-label">Java</h4>
And CSS to that :
和 CSS ：
.progress-label {
float: left;
margin-right: 1em;
}
