如何在Divs上方溢出文本-即使父Div宽度为0％

Question

我正在使用Bootstrap 4，并且我将三个div水平地连续堆叠。这三个div具有不同的百分比宽度。中心div通常为0％。

但是，无论如何，我都希望每次显示0％div的文本。我似乎无法将该div中的文本 a）在每种情况下都高于其他div b）将文本居中，以使溢出从0％div的中心开始等距延伸。

我真的希望不必使用左/右定位，因为文本的宽度是可变的。

代码如下：

<div class="row d-flex">                        
     <div class="float-left bg-info" style="width: 80%;"></div>
     <div class="text-nowrap text-center" style="width: 1%;">32.34 in.</div>    
     <div class="float-right bg-warning" style="width: 19%;"></div>
</div>

这是BootPly： https://www.bootply.com/IurHhOsuf5

是否有办法使此文本停留在最前面？

这是当前正在执行的操作的图像：

Before

这是应该的样子：

After

谢谢大家！

Answer 1

为什么不使用Bootstrap4中的进度栏​​？

<div class="container">
  <div class="progress">
    <div class="progress-bar bg-info" role="progress" style="width: 80%;"></div>
    <div class="progress-bar bg-light text-dark align-items-center" role="progress" 
        style="width: 1%; z-index:10;">32.34 in.</div>
    <div class="progress-bar bg-warning" role="progress" style="width: 19%;"></div>
  </div>
</div>

在此处耦合关键点：

1. 您需要使用z-index使文本显示在进度条的顶部。
2. 默认情况下，进度栏的伸缩方向设置为列。为了使文本居中，您需要设置align-items: center;。或者，您可以使用引导程序类align-items-center。

演示： https://jsfiddle.net/davidliang2008/aq9Laaew/290113/