bootstrap4 Flex 的柱高不等

Question

我正在使用 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>

Answer 1

您应该使用row 和col-*s 并使用d-block 和mx-auto 类在列的中心对齐imgs。

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

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