我正在建一张 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 .有谁知道发生了什么以及为什么?
最佳答案
这是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>
关于html - Bootstrap 4 进度条不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48973687/