更改进度条宽度，无需移动元素

Question

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

我想要实现以下目标：

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

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我想，我不应该使用progress-bar引导类，而应该使用空div并使用width和{I}下的background-color。玩家信息：武器，名称和健康计数，但我不知道如何在CSS中实现这一点。 或者是否有某种方法可以使用引导程序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>