如何在引导程序 4 中垂直分布 div 框答案

【问题标题】：How to distribute div boxes vertically in bootstrap 4如何在引导程序 4 中垂直分布 div 框
【发布时间】：2023-03-03 14:53:01
【问题描述】：

给定一些DIV框如下：

bootply here

    </div>
    <div class="col-4">
        <div style="border: 1px solid darkorange; margin: 1em;">BOX1</div>
        <div style="border: 1px solid darkorange; margin: 1em;">BOX2</div>
        <div style="border: 1px solid darkorange; margin: 1em;">BOX3</div>
    </div>

在设置为 100vh 高度的 body 内，

如何使用flexbox让绿色边框的DIV占据所有容器中剩余的垂直空间，并把BOX1、BOX2、BOX3隔开，让它们都共享一个容器内等高尽可能多地占用垂直空间。

我试过这个：

body {
    height: 100vh;
}
ng-component { width: 100%; }
div.app {
    height: 100%;
    display: flex;      
    border: 1px solid red;
    margin: 1px;
}

div.container-fluid {
    display: flex;
    flex-grow: 1;

    border: 2px solid orange;
}

【问题讨论】：

您想要的输出的可视化表示会更有意义。请张贴您正在寻找的图片。
我发了一张图片。

标签： twitter-bootstrap flexbox bootstrap-4

【解决方案1】：

        <div class='col-4 d-table'>
            <div class='d-table-row'><span>box 1</span></div>
            <div class='d-table-row'><span>box 2</span></div>
            <div class='d-table-row'><span>box 3</span></div>
        </div>

【讨论】：

【解决方案2】：

如果我理解正确的话。我刚刚添加了一个额外的类（你可以重命名它）。此外，带有animated fadeInI 的容器提供了新的 CSS。我使它具有弹性，但具有列方向。

然后对于内部项目，这些引导 4 属性：

    <div class="col-4 border-1-2 d-flex flex-column align-content-stretch">
        <div class="d-flex col mt-0" style="border: 1px solid darkorange; margin: 1em;"></div>
        <div class="d-flex col" style="border: 1px solid darkorange; margin: 1em;"></div>
        <div class="d-flex col mb-0" style="border: 1px solid darkorange; margin: 1em;"></div>
    </div>

【讨论】：