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

Question

我有一张截图，如下所示，我使用 bootstrap 4.1

复制了它

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

我在 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>

问题陈述：

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

Answer 1

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

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

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

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

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

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

How to align 5 images in a row in bootstrap grid system?

html

css

image

bootstrap-4

bootstrap-grid