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:

带有 Bootstrap 进度条的表格单元格 @BaruchKogan CodePen

有人明白发生了什么以及为什么吗？

- Boris K

---

你能附上一张截图吗？ - Edric

是的，刚刚添加了一个。 - Boris K

尝试过那样做，但没有任何区别。 - Boris K

你提到了 CodePen 示例。它在哪里？ - Stavm

刚刚添加了 Codepen。 - Boris K

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 ，就像您代码片段的此分支一样

---

一个更简单的 Bootstrap 4 友好方法是使用网格，这需要更少的标记。 row 显示为 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

- Zim

---

这真是救命稻草，我花了将近7个小时尝试了所有方法。干杯！ - Shahzaib Ayyub

Answer 2

因为您添加了许多 d-flex 类，所以进度条没有显示出来。

删除 d-flex，进度条就会显示出来。

使用普通的 Bootstrap 列而不是 d-flex div。

- WebDevBooster

---

问题在于容器元素不是页面，而是表格中的单元格。我无法将其拆分为Bootstrap列。 - Boris K

Answer 3

将进度条的 w-75 类添加到其父容器上，而不是直接应用于进度条本身（因为进度条没有伸展的空间）。

https://www.bootply.com/k1XjtaHCxe

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

- Stavm