html - 更改进度条宽度，不移动内部元素

Question

关于如何在不移动其中的元素的情况下更改进度条的显示宽度，我缺乏想法。

我想实现以下目标:

我当前的一个玩家条目代码是:

<div class="row playerInfo">
  <div class="row healthProgress progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" style="width: 100%; height: 25px;">
    <img id="primaryWeapon" class="col-4 pull-left no-padding img-responsive" src="/images/weapons/weapon_ak47.png" height="25px" />
    <p class="playerName col-6 text-right no-padding">Matias49</p>
    <p class="playerHealth col-1>100</p>
  </div>
</div>

我想，与其使用 progress-bar Bootstrap 类，我应该选择一个空的 div 并使用 width 和我在玩家信息下堆叠的 background-color:武器、名称和生命值，但我不知道如何在 css 中实现这一点。或者是否有某种方法可以使用 Bootstrap progress-bar 类使其工作？

nb:我知道我可能应该将 progress-bar div 包装在 progress 中。

Answer 1

非常感谢@Pablo Darde 的评论，但我设法通过将一个 div 堆叠到另一个 div 上来解决这个问题，正如我最初的想法。

最后我的代码是这样的:

<div class="row playerInfo">
    <div class="row healthProgress progress-bar role="progressbar" aria-valuenow="100" aria-valuemin="0" style="width: 100%; height: 25px></div>
    <div class="row firstRow style="position: absolute;">
        <img id="primaryWeapon" class="col-4 pull-left no-padding img-responsive" src="/images/weapons/weapon_ak47.png" height="25px" />
        <p class="playerName col-6 text-right no-padding">Matias49</p>
        <p class="playerHealth col-1>100</p>
    </div>
</div>