html - Bootstrap 4 进度条不显示

Question

我正在建一张 table 。几个列需要一个进度条，每边都有一个标签列。我使用 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>

在我的应用程序或 Codepen 中，进度条不呈现。

没有所有周围的 HTML，进度组件可以很好地呈现。

截图如下:

这是代码笔:

看笔Table cell with Bootstrap progress bar通过 Baruch Kogan ( @BaruchKogan ) 在 CodePen .

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

Answer 1

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

为了让父级 d-flex flex-row 容器的 flexbox 子级能够填满，需要在子级上设置宽度。可以使用w-100设置width:100%，或者使用flex-grow:1。

问题修复:https://www.codeply.com/go/kU7OwwmM2I

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

注意:如果您希望所有 3 个子项均等填充，请对所有子项使用 w-100，like on this fork of your codepen

---

一种更简单的 Bootstrap 4 友好方法 是使用网格，它需要的标记少得多。 row 是 display:flex，col 是 flex-grow:1...

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

更好的方法:https://www.codeply.com/go/WFpkiDsJgW