使用Bootstrap网格如何使最后剩下的项目对齐而不是散布在整个宽度上

Question

使用Bootstrap 4使用 row 和 col 类

显示一系列图像

<div class="container-fluid">
    <div class="row">
            <div class="col">
                <figure class="figure">
                    <a href="FixSongsReport00211_changesVarious Artists_Sounds of the Sixties 1960 Still Swinging.html">
                        <img src="../style/images/folder.jpg" class="figure-img" width="200" height="200">
                    </a>
                    <figcaption class="figure-caption">
                        Sounds of the Sixties 1960 Still Swinging
                    </figcaption>
                </figure>
            </div>
            <div class="col">
                <figure class="figure">
                    <a href="FixSongsReport00211_changesVarious Artists_Stage + Screen.html">
                        <img src="../style/images/folder.jpg" class="figure-img" width="200" height="200">
                    </a>
                    <figcaption class="figure-caption">
                        Stage + Screen
                    </figcaption>
                </figure>
            </div>
    </div>
</div>

我的问题是，当我们到达列表的末尾，因此图像较少时，可以将它们放到最后一行，将它们隔开以使用可用空间。如果您看到屏幕截图，我希望最后两张图像占据屏幕的左手而不是隔开。

我该如何实现？

当只有几个项目时看起来特别糟糕

即

建议网格的答案适用于最后一行，但前提是有多行。我通过修改类并添加样式style =“ display：grid; grid-template-columns：repeat（auto-fit，minmax（200px，1fr））; grid-gap：5px;”来修改外部div以使用网格。

这解决了最后一行（第一张图片）的问题，但是当只有一行（第二张图片）时，没有任何想法吗？

flexbox解决方案似乎涉及对各种事物进行硬编码，似乎并不适用于一般情况。