如何在进度栏引导程序旁边添加文本? [英] How to add text next to progress bar bootstrap?

问题描述

我正在尝试在引导程序的进度栏中添加一些文本.我希望它的外观如下:

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-

Java: x-x-x-x-x-x-x-x-x-

C ++: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-是进度条.

where x-x-x-x-x-x-x-x-x- is the progress bar.

我已经写了一些代码，但似乎无法使文本与进度条内联.任何帮助将是有用的.我只是在使用引导程序.

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>

推荐答案

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

You can fix this by CSS rules on the H4 label.

JSFiddle演示.

将HTML更改为此:

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

还有CSS:

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

这篇关于如何在进度栏引导程序旁边添加文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！