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

【问题标题】：How to align 5 images in a row in bootstrap grid system?如何在引导网格系统中连续对齐 5 个图像？
【发布时间】：2018-12-15 05:37:23
【问题描述】：

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

这是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 张。

【问题讨论】：

为什么不给容器设置全宽，用@media手动设置图片大小？
@ventaquil 我不使用容器作为全宽的原因是因为我想要左边距和右边距，左右间距。
@ventaquil 你在吗？
你如何在手机上看到这些图片？

标签： html css image bootstrap-4 bootstrap-grid

【解决方案1】：

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

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

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

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

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

【讨论】：

太棒了，非常感谢。我想知道使用<div class="col text-center"> 的目的是什么？
在fiddle 中，图像的高度也是恒定的，即 98 像素。我不希望这种情况发生。我希望小提琴采用图像的常规尺寸。有什么办法可以做到吗？
@user5447339 给你https://jsfiddle.net/7nzvby9o/20/。我使用col 类来填充容器的完整列。