css - bootstrap4 Flex的柱高不相等

我正在使用Boostrap4并尝试制作一个简单的4 * 4的div网格，其中包含图像和一些文本。最初，我尝试使用嵌套在一行中的6列，最终看起来像：



因此，这里的问题是图片不在列中居中。因此，接下来我在该行上使用text-center。这可行，但是当我希望将其对齐到图像的左侧时，文本也居中：



因此，我最终放弃了所有这些内容，摆脱了引导程序行和列，并尝试使用引导程序的flex类。它具有以下一般结构：

<div class="d-flex justify-content-around">
    <div class="d-flex flex-column">
        <div> image and text content here </div>
    </div>
</div>

现在这很好用，但是因为列的高度可以变化，所以行看起来不对齐：



解决此问题的方法是什么？尝试使用bootstrap4尝试像这样制作div网格时的最佳实践是什么。

由于有人想查看整个代码。

<div class="row border justify-content-around border-r flex-wrap">
                    <div class="d-flex flex-column border-r"> <!-- this is repeated twice more for each column -->
                        <div class="tile">
                            <a href="./wanderlust.html">
                                <img class ="thumbnail img-fluid" src ="images/wanderlust.jpg"/>
                                <h5 class=" thumbnail-title"> Wanderlust </h5>
                                <p class=" thumbnail-subtitle"> design research + UX + UI <br> +  programming </p>
                            </a>
                        </div>
                        <div class="tile">
                            <a href ="behavior-change.html">
                                <img class ="thumbnail img-fluid" src ="images/breakfast.jpg">
                                <h5 class="thumbnail-title"> Behavior Change </h5>
                                <p class="thumbnail-subtitle"> design research</p>
                            </a>
                        </div>
                    </div>
</div>

最佳答案

您应该使用row和col-*并使用img和d-block类将mx-auto对齐到列的中心。

<img class="thumbnail img-fluid d-block mx-auto" src="images/wanderlust.jpg" />

d-block将其显示设置为block，并且mx-auto将其margin-left和margin-right设置为auto。

关于css - bootstrap4 Flex的柱高不相等，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50321773/