Bootstrap 4 进度条未显示

Posted 2023-03-05

【中文标题】Bootstrap 4 进度条未显示

【英文标题】：Bootstrap 4 progress bar is not showing up

【发布时间】：2018-08-05 00:50:12

【问题描述】：

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

请参阅 CodePen 上 Baruch Kogan (@BaruchKogan) 的 Pen Table cell with Bootstrap progress bar。

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

【问题讨论】：

可以附上截图吗？

是的，刚刚加了一个。

试过了，没用。

您提到了 codepen 示例。它在哪里？

刚刚添加了 Codepen。

【参考方案1】：

这是因为您添加了很多 d-flex 类。

删除d-flex，就会出现进度条。

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

【讨论】：

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

【参考方案2】：

添加进度条的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>

【参考方案3】：

这是一个 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，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

【讨论】：

这是一个救命稻草，我花了将近 7 个小时尝试一切。干杯！