如何使用Bootstrap v5.2实现标签置于进度条右侧的进度条？

我想用Bootstrap v5.2实现一种进度条，要求把数值标签放在进度条的最右侧（可覆盖进度条的填充部分或背景区域），预期效果是标签始终固定在进度条右端，不会因文本长度变化错位。

我尝试过用负边距的方法接近预期效果，但当标签文本变长时就会出现布局错位的问题。

当前实现代码 #

单个进度条视图（ProgressBarWithName.cshtml） #

@{
    var valuePercentage = (double)Model.Value / Model.MaxValue * 100;
}

<div class="row m-2" style="height: 50px;">
    <div class="col-3 text-white bg-dark h-100 d-flex justify-content-end">
        <div class="font-allan align-self-center"><b>@Model.Name</b></div>
    </div>
    <div class="col-9 h-100">
        <div class="row gx-0 progress-container h-100">
            <div class="col-11">
                <div class="progress h-100">
                    <div class="progress-bar"
                         role="progressbar" aria-label="Example with label"
                         aria-valuenow="@valuePercentage" aria-valuemin="0" aria-valuemax="@Model.MaxValue"
                         style="width: @valuePercentage%;">
                    </div>
                </div>
            </div>
            <div class="col-1 progress-label align-self-center">
                <b class="@if (valuePercentage > 85){ <text>text-white</text> }">@Model.Value</b>
            </div>
        </div>

    </div>
</div>

批量渲染视图（CustomBarChart.cshtml） #

<div>
    @foreach (var item in Model.Items)
    {
        await Html.RenderPartialAsync("ProgressBarWithName", item);
    }
</div>

测试用硬编码模型 #

@{
    var stat = new Stat("Some Stat", 40, 100);
    var stat1 = new Stat("Some Stat1", 84, 100);
    var stat2 = new Stat("Some Stat2", 86, 100);
    var stat3 = new Stat("Some Stat3", 10, 100);
    var stat4 = new Stat("Some Stat4", 100, 100);
    var stats = new Stats(new List<Stat> { stat, stat1, stat2, stat3, stat4 });
    await Html.RenderPartialAsync("CustomBarChart", stats);
}

CSS样式 #

.progress-container{
  margin-right: -60px;
}

.progress-label{
  margin-left: -35px;
  width: 0;
}

核心问题 #

Bootstrap进度条默认将标签放在填充区域内，但我需要标签固定在整个进度条的最右侧。试过使用float属性，但因采用row/col布局模拟网格，未能解决问题。

放弃负边距和拆分列的方式，改用相对定位+绝对定位实现标签固定在进度条右侧，无论文本多长都不会错位：

修改后的单个进度条视图（ProgressBarWithName.cshtml） #

@{
    var valuePercentage = (double)Model.Value / Model.MaxValue * 100;
}

<div class="row m-2" style="height: 50px;">
    <div class="col-3 text-white bg-dark h-100 d-flex justify-content-end">
        <div class="font-allan align-self-center"><b>@Model.Name</b></div>
    </div>
    <div class="col-9 h-100 position-relative">
        <!-- 进度条容器设为相对定位，作为绝对定位的参考 -->
        <div class="progress h-100">
            <div class="progress-bar"
                 role="progressbar" aria-label="Example with label"
                 aria-valuenow="@valuePercentage" aria-valuemin="0" aria-valuemax="@Model.MaxValue"
                 style="width: @valuePercentage%;">
            </div>
        </div>
        <!-- 标签用绝对定位固定在右侧，垂直居中 -->
        <div class="position-absolute end-0 top-50 translate-middle-y pe-2">
            <b class="@(valuePercentage > 85 ? "text-white" : "")">@Model.Value</b>
        </div>
    </div>
</div>

清理冗余样式 #

删除之前定义的.progress-container和.progress-label相关CSS规则，无需再使用负边距。

原理说明 #

• 给进度条所在的col-9容器添加position-relative，作为绝对定位元素的参考容器
• 标签元素通过position-absolute end-0 top-50 translate-middle-y实现水平靠右、垂直居中，pe-2避免标签贴紧边缘
• 该方案彻底脱离列布局的限制，标签始终固定在进度条右端，不会因文本长度导致错位

内容的提问来源于stack exchange，提问作者Kappacake