Css 引导进度条，其余部分显示文本

我需要百分比的值在右边一个固定的位置，有什么想法吗？我试着将文本放在一个范围内，并使用相对位置和左120%的填充设置范围。但随着条形图的值越来越高，文本会被推送并消失

css

酒吧的html

<div class="row">
                <div class="col-md-4">
                    <label>Caldas / Coberturas</label>
                </div>
                <div class="col-md-8">
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" aria-valuenow="73" aria-valuemin="0" aria-valuemax="100" style="width: 68%;"><span>68%</span></div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <label>Pacotes de Variedade</label>
                </div>
                <div class="col-md-8">
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" aria-valuenow="73" aria-valuemin="0" aria-valuemax="100" style="width: 20%;"><span>20%</span></div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <label>Sobremesas</label>
                </div>
                <div class="col-md-8">
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" aria-valuenow="73" aria-valuemin="0" aria-valuemax="100" style="width: 10%;"><span>10%</span></div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <label>Sorvetes / Gelados</label>
                </div>
                <div class="col-md-8">
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" aria-valuenow="73" aria-valuemin="0" aria-valuemax="100" style="width: 20%;"><span>20%</span></div>
                    </div>
                </div>
            </div>
            <a href="#">+25 Subclasses</a>
        </div>

卡尔达斯/科贝图拉斯
68%
瓦里达德酒店
20%
索布雷马斯酒店
10%
山葵
20%

您要做的是给

.progress bar span

元素一个，并将它们设置为位于上

因为您希望条形图本身占据可用宽度的

100%

，所以您希望为跨度指定一个负

右

值。在下面的示例中，我使用了

-20px

请注意，您还可以删除左侧的

填充

，因为它不会应用于绝对定位的元素，因此与此无关。还请注意，我在一个自定义容器中添加了一个宽度稍小的容器，这只是为了在这段代码中更清晰。你自己不需要这个：）

.container{
宽度：80%；
}
.进展{
高度：28px；
}
.进度条{
背景色：#002C6C；
字体大小：16px；
线高：28px；
}
跨度{
位置：绝对位置；
右：-20px；
颜色：#002C6C；
}

卡尔达斯/科贝图拉斯
68%
瓦里达德酒店
20%
索布雷马斯酒店
10%
山葵
20%

<div class="row">
                <div class="col-md-4">
                    <label>Caldas / Coberturas</label>
                </div>
                <div class="col-md-8">
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" aria-valuenow="73" aria-valuemin="0" aria-valuemax="100" style="width: 68%;"><span>68%</span></div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <label>Pacotes de Variedade</label>
                </div>
                <div class="col-md-8">
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" aria-valuenow="73" aria-valuemin="0" aria-valuemax="100" style="width: 20%;"><span>20%</span></div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <label>Sobremesas</label>
                </div>
                <div class="col-md-8">
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" aria-valuenow="73" aria-valuemin="0" aria-valuemax="100" style="width: 10%;"><span>10%</span></div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <label>Sorvetes / Gelados</label>
                </div>
                <div class="col-md-8">
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" aria-valuenow="73" aria-valuemin="0" aria-valuemax="100" style="width: 20%;"><span>20%</span></div>
                    </div>
                </div>
            </div>
            <a href="#">+25 Subclasses</a>
        </div>