Bootstrap 4进度条未显示

Question

我正在建一张桌子.一些列需要一个进度条,每侧都有一个标签列.我正在使用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,进度组件可以很好地呈现.

这是一个截图:

这是Codepen:

请参阅Barpe Kogan(@BaruchKogan)在CodePen上使用Bootstrap进度条的Pen Table单元格.

有谁知道发生了什么,为什么？

Answer 1

这是一个flexbox问题,而不是进度条的问题.

为了d-flex flex-row填充父容器的flexbox子级,需要在子级上设置宽度.您可以使用w-100设置宽度: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所有这些孩子,就像你的codepen的这个分叉一样

一个更简单的Bootstrap 4友好方法是使用网格,这需要更少的标记.的row是显示:柔性,以及col是柔性成长: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