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

Question

我有一个截图，如下所示，我是使用bootstrap 4.1复制的

此处是该{strong>的fiddle，但由于图像彼此非常接近，因此它仍未正确对齐。

在小提琴中用来复制上述屏幕截图的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。