如何调整图像行大小并在移动设备上安装一行？

Question

有点愚蠢的问题，但我可以弄清楚。我正在我的投资组合网站上工作，我有擅长的软件语言图标（bootstrap应该是其中之一）。

我只是希望这些图像显示在一行中，并根据屏幕大小调整大小。

以下是我一直在尝试的一些代码：

<div class="row">
    <div class="col-md-12 text-center" style="max-width: 100%">
        <img style="height: auto; width:64px" src="/images/html5.png"  />
        <img style="height: auto; width:64px" src="/images/divide.png"  />
        <img style="height: auto; width:64px" src="/images/bootstrap.png" />
        <img style="height: auto; width:64px" src="/images/divide.png"  />
        <img style="height: auto; width:64px" src="/images/c.png" />
        <img style="height: auto; width:64px" src="/images/divide.png"  />
        <img style="height: auto; width:64px" src="/images/Unity.png" />
    </div>
</div>

以下是它在移动设备上的外观：

Answer 1

img {
  display: inline-block !important;
  max-width: 12% !important;
}

边框包括宽度中的填充和边框以及14.28％* 7图像=宽度的99.96％。你也可以使用：

• 14.285％* 7张图片= 99.995％
• 14.2857％* 7张图片= 99.9999％
• 14.285714285714285714285714285714％* 7张图片= 99.999999999999 ...％

Answer 2

使用Bootstrap，您需要在div上使用多个col-*-*类才能获得此类结果。

这些课程的目的是根据屏幕大小（以及每个设备上的演示文稿 - responsive design principle之后）为您提供不同的演示文稿。

您可以在this interesting article和this one too找到更多信息。

正如Chris Happy指出的那样，这可以通过使用CSS中的百分比来实现。但这也是Bootstrap后面所做的，所以你不必重新发明轮子。

Answer 3

通过查看代码，您将整个页面包装在一个div容器中。使用bootstrap时，将div容器用于页面的每个不同部分非常重要。因此，例如在'row'之前使用另一个容器（如果正常的容器不起作用，请尝试流体容器）。并且不要忘记在正确的位置关闭div以正确区分您的部分！ Bootstrap是一个网格系统，因此您必须分段构建页面。