Twitter bootstrap 在底部具有相同高度的flexbox中的所有div

我有下面的html来使用Bootstrap4构建一个网格

这里可能有不同的高度
应该始终处于底部（如第四次约会）
这里可能有不同的高度
应该始终处于底部（如第四次约会）
这里可能有不同的高度
这里可能有不同的高度
这里可能有不同的高度
应该始终处于底部（如第四次约会）

无法平均对齐不同flexbox父级的子级中的内容。但是，您也可以使用

d-flex

，然后使用

mt auto

（

margin top:auto

）将日期推到列的底部，使列也成为flexbox容器

        <div class="col-sm-12 col-md-3 d-flex flex-column">
            <div class="row">
                <div class="col-lg-12">
                    here are different heights possible
                </div>
            </div>
            <div class="row mt-auto">
                <div class="col-lg-12 date">
                    date
                </div>
            </div>
        </div>

这里可能有不同的高度
日期

演示：

---

另请参见：

您可以拉伸

日期

容器，用

flex:1

填充行的剩余空间，并使用

对齐项目：flex end:-）将所有内容底部对齐

我已经在下面稍微修改了您的示例，您实际上不需要在
包装中增加
.row
。
col-lg-12
应该是下一行所需的全部内容

我只添加了
边框：白色1px实心以便您可以看到我的解决方案是如何工作的-您可以忽略这一点

（您可能需要查看全屏以查看堆叠元素是否正常工作）


.wrapper{
显示器：flex；
弯曲方向：立柱；
背景：#1D3159；
颜色：白色；
}
.日期{
背景：#1D3159；
颜色：白色；
弹性：1；
显示器：flex；
对齐项目：柔性端；
边框：白色1px实心；
}

这里可能有不同的高度
应该始终处于底部（如第四次约会）
这里可能有不同的高度
应该始终处于底部（如第四次约会）
这里可能有不同的高度这里可能有不同的高度这里可能有不同的高度这里可能有不同的高度这里可能有不同的高度
应该始终处于底部（如第四次约会）