Html 引导4进度条未显示

我正在做一张桌子。有两列需要一个进度条，每侧都有一个标签列。我使用React将其生成为一个组件，结果生成以下HTML：

<div class="d-flex flex-row justify-content-between">
    <div class="d-flex flex-column justify-content-between" style="font-size: 0.8rem;">
        <span>Current</span>
        <span>3.2</span>
    </div>
    <div class="d-flex flex-column">
       <div class="progress">
           <div class="progress-bar w-75" role="progressbar" aria-valuenow="69" aria-valuemin="0" aria-valuemax="100" style="width: 69%; background-color: rgb(52, 125, 241);">
           </div>
        </div>
    </div>
    <div class="d-flex flex-column  justify-content-between" style="font-size: 0.8rem;">
        <span>Day 120</span>
        <span>4.6</span>
    </div>
</div>

现在的
3.2
第120天
4.6

无论是在我的应用程序中还是在代码笔中，进度条都不会呈现

没有所有周围的HTML，progress组件呈现良好

以下是一个屏幕截图：

这是密码笔：

请参阅Baruch Kogan（）的钢笔

---

有人知道发生了什么以及为什么吗？

这是因为您添加了很多

d-flex

类

删除

d-flex

，进度条将显示出来

---

使用普通引导列而不是

d-flex

div。

添加进度条的

w-75

类。到其父容器，而不是直接在进度条上应用它（进度条无处可拉伸）

现在的
3.2
第120天
4.6

这是flexbox的问题，而不是进度条的问题

为了使父

d-flex-flex行

容器的flexbox子容器能够跨行填充，需要在子容器上设置宽度。您可以使用

w-100

设置宽度：100%，或者使用

flex-grow:1

问题已修复：

---

更好的方法：

你能附加一个屏幕截图吗？是的，刚刚添加了一个。试过了，没什么区别。你提到了codepen示例。它在哪里？刚刚添加了代码笔。问题是容器元素不是页面，而是表中的一个单元格。我无法将其拆分为引导列。p.s如果您发现自己在整个HTML模板中反复重复相同的类名，您应该停下来思考。

<div class="d-flex flex-row justify-content-between">

    <div class="d-flex flex-column justify-content-between" style="font-size: 0.8rem;">
        <span>Current</span>
        <span>3.2</span>
    </div>

    <div class="d-flex flex-column w-75">
       <div class="progress">
           <div class="progress-bar" role="progressbar" aria-valuenow="69" aria-valuemin="0" aria-valuemax="100" style="width: 69%; background-color: rgb(52, 125, 241);">
           </div>
        </div>
    </div>

    <div class="d-flex flex-column  justify-content-between" style="font-size: 0.8rem;">
        <span>Day 120</span>
        <span>4.6</span>
    </div>
</div>

<div class="d-flex flex-row justify-content-between">
    <div class="d-flex flex-colum justify-content-between" style="font-size: 0.8rem;"><span>Current</span><span>3.4</span></div>
    <div class="d-block w-100">
        <div class="progress">
            <div class="progress-bar" role="progressbar" aria-valuenow="83" aria-valuemin="0" aria-valuemax="100" style="width: 83%; background-color: rgb(52, 125, 241);"></div>
        </div>
    </div>
    <div class="d-flex flex-column  justify-content-between" style="font-size: 0.8rem;"><span>Day 120</span><span>4.1</span></div>
</div>

<div class="row">
    <div class="col" style="font-size: 0.8rem;"><span>Current</span><span>3.4</span></div>
    <div class="col">
        <div class="progress">
            <div class="progress-bar" role="progressbar" aria-valuenow="83" aria-valuemin="0" aria-valuemax="100" style="width: 83%; background-color: rgb(52, 125, 241);"></div>
        </div>
    </div>
    <div class="col" style="font-size: 0.8rem;"><span>Day 120</span><span>4.1</span></div>
</div>