logo标签列表

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

twitter-bootstraplabelprogress-bar
9

你好，我正在尝试在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>
1个回答
8
你可以通过H4标签上的CSS规则来解决这个问题。 JSFiddle演示。 将HTML更改为以下内容：
<h4 class="progress-label">Java</h4>

并且加上CSS：

.progress-label {
    float: left;
    margin-right: 1em;
}
不错的解决方案。实际上，只要将 progress-label 类添加到 BS4 中的任何标签中，就可以使用它。 - eheydenr
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接