如何在CSS/Bootstrap中水平堆叠/对齐图像，而不考虑方向？

我无法显示堆叠的图像。我使用的是Bootstrap，我用Django在一个模型中显示所有图片（这里Django没有问题）

我知道这取决于flexbox，我搜索并使用了各种方法，如包裹、对齐项目、对齐内容等，虽然我可以将横向图像与纵向图像的底部对齐，但我想让它们像本网站上的图像一样堆叠在一起：

不同的方向都能很好地水平叠加在一起。这是我的代码（{code}只是从Django模型中提取数据，它将每个图片添加到一个循环中）

{对象列表%中图片的百分比}
{%endfor%}

在看了其他问题和指南之后，我问了这个问题，并尝试了各种方法，主要是将top div更改为包含各种引导类，但我没有达到我想要的效果

---

任何需要的帮助或建议都需要使用javascript库来实现。 这种类型的布局称为砌体布局

有关如何实施的更多信息，请参阅以下链接

（需要Jquery）

此库的替代方案（纯javascript）

更多图书馆

<div class="row my-4 text-center mx-auto w-auto flex-wrap align-items-start">
    {% for picture in object_list %}
    <div class="col mx-auto centered mb-3">
        <a href="#">
            <div class="card mx-auto text-center" style="width: 25em">
                <img src="{{ picture.front_image.url }}" class="card-img-top p-3" alt="Picture">
                <div class="card-body">
                    <h5 class="card-title font-weight-bold">{{ picture.name }}</h5>
                </div>
            </div>
        </a>
    </div>
    {% endfor %}
</div>