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：

请参阅Table cell with Bootstrap progress bar上Baruch Kogan（@BaruchKogan）的笔CodePen。

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

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，like on this fork of your codepen

更简单的 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

Answer 2

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

删除d-flex，系统会显示进度条。

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

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>

Bootstrap 4进度条未显示

3 个答案: