twitter-bootstrap - 如何在进度条 Bootstrap 旁边添加文本？

Question

您好我正在尝试在 Bootstrap 中向进度条添加一些文本。我希望它看起来的方式如下:

java :x-x-x-x-x-x-x-x-x-

C++:x-x-x-x-x-x-x-x-x-

其中 x-x-x-x-x-x-x-x-x- 是进度条。

我已经编写了一些代码，但似乎无法将文本与进度条内联。任何帮助都会很有用。我只使用 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>

Answer 1

您可以通过 H4 标签上的 CSS 规则解决此问题。

JSFiddle demo.

将 HTML 更改为此:

<h4 class="progress-label">Java</h4>

和CSS:

.progress-label {
    float: left;
    margin-right: 1em;
}