html - 如何在引导网格系统中连续对齐 5 个图像？

Question

我有一个如下所示的屏幕截图，我使用 bootstrap 4.1 复制了该屏幕截图

这是小提琴，但它仍然没有正确对齐，因为图像彼此非常接近。

为了复制上面的屏幕截图，我在小提琴中使用的 HTML 代码是：

<div class="container text-center border">
<div class="hello_world">
   <img src="https://image.ibb.co/fxj2nJ/image1.png" alt="image1">
   <img src="https://image.ibb.co/gZyHMd/image2.png" alt="image2">
   <img src="https://image.ibb.co/mGTpZy/image3.png" alt="image3">
   <img src="https://image.ibb.co/bZkKZy/image4.png" alt="image4">
   <img src="https://image.ibb.co/dF42nJ/image5.png" alt="image5">
</div>

问题陈述：

我想知道如何使用引导网格系统来复制上面的屏幕截图。由于有 5 张图片，所以我不确定如何将 5 张图片的列表分成 12 张的总和。

Answer 1

简单的概念验证：jsfiddle.net。

在 CSS 中，我使用了flex显示模式和justify-content属性

#images {
    display: flex;
    justify-content: space-around;
}

您可以为此模型添加填充或边距。

如果您想在手机或平板电脑上看到不同的视图，只需使用@media.