Bootstrap带步骤进度条优化：图标外显与居中定位求助

我正在制作一个带多步骤的Bootstrap进度条，每个步骤对应一个百分比变量，需要把这些步骤定位在进度条上。目前的实现存在两个问题：

• Font Awesome图标被包含在进度条内部，希望将其置于进度条上方
• 当前图标以左侧对齐目标百分比位置，需要让图标中心与目标百分比位置对齐（例如目标为5%时，图标中心刚好落在5%的位置）

以下是当前使用的代码：

原CSS

.bar-step {
    position:absolute;
    margin-top:-4px;
    z-index:1;
    font-size:12px;
}


.label-line {
    background: #000;
    height:50px;
    width:1px;
    margin-left: 5px;
}

.label-percent {
    margin-left: 5px;   
}

.dot {
    height: 25px;
    width: 25px;
    background-color: #bbb;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    outline: 2px solid white;
  }
  
  .dot i {
    position: initial;

  }
  .progress {
    position: relative;
  }

原HTML

<div class="progress">
    {% for venue_id, reward_position_on_bar in reward_positions.items %}
        {%if venue_id == key%}
            {%for reward_position_on_bar in reward_position_on_bar%}
            <div class="bar-step" style="left: {{reward_position_on_bar.2}}%">
                <div class="dot">
                    <i class="fa-solid fa-gift fa-lg" style="color: #ffffff;"></i>
                </div>
            </div>
            {%endfor%}
        {%endif%}
    {% endfor %}

    <div class="progress-bar bg-success" role="progressbar" style="width: {{value}}%; left: 0;" aria-valuenow="{{value}}" aria-valuemin="0" aria-valuemax="100"></div>
</div>

修改后的CSS #

.bar-step {
    position: absolute;
    /* 将图标上移，完全脱离进度条区域 */
    top: -30px;
    z-index: 1;
    font-size: 12px;
    /* 核心：让图标中心对齐目标百分比位置 */
    transform: translateX(-50%);
}

.label-line {
    background: #000;
    height: 50px;
    width: 1px;
    margin-left: 5px;
}

.label-percent {
    margin-left: 5px;   
}

.dot {
    height: 25px;
    width: 25px;
    background-color: #bbb;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: 2px solid white;
}

.dot i {
    color: #ffffff;
}

.progress {
    position: relative;
    /* 给顶部图标预留空间，避免内容重叠 */
    margin-top: 30px;
}

修改后的HTML #

<div class="progress">
    {% for venue_id, reward_position_on_bar in reward_positions.items %}
        {% if venue_id == key %}
            {% for reward_position_on_bar in reward_position_on_bar %}
                <div class="bar-step" style="left: {{reward_position_on_bar.2}}%">
                    <div class="dot">
                        <i class="fa-solid fa-gift fa-lg"></i>
                    </div>
                </div>
            {% endfor %}
        {% endif %}
    {% endfor %}

    <div class="progress-bar bg-success" role="progressbar" style="width: {{value}}%;" aria-valuenow="{{value}}" aria-valuemin="0" aria-valuemax="100"></div>
</div>

关键改动说明 #

1. 图标移至进度条上方：通过给.bar-step设置top: -30px将图标完全移出进度条，同时给.progress添加margin-top: 30px，避免图标遮挡页面其他内容。
2. 中心对齐百分比位置：添加transform: translateX(-50%)，让元素自身向左偏移50%宽度，刚好实现图标中心与left设置的百分比位置对齐。
3. 简化冗余样式：移除了.dot的position: relative和.dot i的position: initial，不影响效果且代码更简洁。

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