Html 如何在手机上调整图像行的大小并使其适合一行？

这是个愚蠢的问题，但我能解决。我在我的投资组合网站上工作，我有我擅长的软件语言图标（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>

以下是它在手机上的外观：

边框框包括宽度中的填充和边框，14.28%*7个图像=宽度的99.96%。您还可以使用：

• 14.285%*7张图片=99.995%
• 14.2857%*7张图片=99.9999%
• 14.285714285714285714285714285714%*7张图片=99.9999999999…%

---

通过查看代码，您将整个页面包装在一个div容器中。在使用引导时，将div容器用于页面的每个不同部分非常重要。例如，在“行”之前，请使用另一个容器（如果普通容器不起作用，请尝试流体容器）。别忘了在正确的位置关闭div以正确区分您的分区！ Bootstrap是一个网格系统，因此您必须将页面分为多个部分进行组织。

使用，您需要在div上使用多个

col-*-*

类才能获得这样的结果

这些课程的目的是根据屏幕大小为您提供不同的演示文稿（此外，还包括每个设备上的演示文稿-遵循）

您可以找到有关和的更多信息

---

正如ChrisHappy指出的，这可以通过CSS中的百分比来实现。但这也是Bootstrap在后面所做的，因此您不必重新发明轮子。

值得一看，它是一个非常方便和强大的框架。谢谢

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