Twitter bootstrap Bootstrap 3种将8个图像排成一行的方式

我有八张640x480的图片。它可能会波动一两次，我希望它们均匀分布&以一行为中心

IIUC iPhone 6的屏幕为1334x750。因此，我希望一行至少有两个640x480图像。然而，由于屏幕具有“高像素密度”，可能更多

我的笔记本电脑的分辨率是1080p，也就是1920像素，所以我希望至少有三幅图像清晰地显示在这一行

对于不适合第二行的图像，我希望它们位于下一行，或者稍微调整以适合

---

我开始写一篇文章，但我不知道如何按照上面的要求标记引导程序。

就我个人而言，在这个特定的案例中，我可能会使用flexbox

注意：请记住测试它是否符合浏览器要求：

是的，下面的CSS可以真正简化-我只是通过

您仍然可以将图像放入

.col-*

div中，以便更准确地控制某些设备上的大小，但如果您的目标是640x480，则不需要这样做

.img填充{
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit柔性方向：行；
-ms柔性方向：行；
弯曲方向：行；
-webkit柔性包装：包装；
-ms-flex-wrap:wrap；
柔性包装：包装；
-webkit内容：周围的空间；
-ms-flex-pack：分发；
证明内容：周围的空间；
-webkit对齐内容：周围的空间；
-ms柔性线包：分发；
对齐内容：周围的空间；
-webkit对齐项：flex开始；
-ms-flex-align：开始；
调整项目：灵活启动；
}
.img填充。img响应{
-网络工具包订单：0；
-ms弹性订单：0；
顺序：0；
-webkit flex:0 1自动；
-ms-flex:01自动；
flex:01自动；
-webkit自动对齐：自动；
-ms flex项目对齐：自动；
自对准：自动；
}
html，
身体{
溢出：隐藏；
填充：0；
保证金：0；
}

希望我能在bootstrap中混合flexbox的内容。实际上，我自己也在这里尝试过：但是专注于你的代码，你的代码在1920年的大屏幕上几乎无法跨越3幅图像。IOS的像素密度呢？谢谢如果您删除

html

和

body

标记上的填充/边距等并删除滚动条，则会发生这种情况-我已将其更新为示例。我将把像素密度作为一个单独的问题来讨论。如果您使用桌面浏览器，请记住考虑浏览器的chrome/UI边框宽度。