Html 重新创建Github'；s响应性徽标'；玻璃陈列柜 解释

我正在尝试在的底部重新创建徽标展示（只有在签署后才会显示）。当检查它时，徽标的大小会根据屏幕分辨率发生变化（如下所示），但在我的代码中（我尝试执行的代码与Github的代码最为相似），什么都没有发生；对于每个分辨率，它都保持相同的大小

代码 由于我使用的是Bootstrap3.3.7，它不支持flexbox（至少在将特定css作为html类编写时它不起作用），所以我不得不编写css

你也可以在中看到它

.logos{
背景色：rgb（255、255、255）；
填充：0；
}
.徽标.文本中心{
框大小：边框框；
显示：块；
}
.标志ul{
文本对齐：居中；
过滤器：灰度（）！重要；
显示：flex！重要；
列表样式：无；
-webkit盒子包：中心！重要；
证明内容：中心！重要；
柔性包装：包装！重要；
左侧填充：0；
边缘顶部：16px；
边缘底部：16px；
框大小：边框框；
}
李先生{
显示：列表项；
文本对齐：-webkit匹配父项；
框大小：边框框；
}
.logo.logo img{
位置：相对位置；
显示：内联块；
垂直对齐：中间对齐；
宽度：自动；
利润率：10px 20px；
右边填充：0！重要；
左侧填充：0！重要；
}

我建议使用媒体查询来帮助调整特定屏幕大小的图像。下面是一个例子：

CSS

以下是一个解释媒体查询的链接：

---

祝你好运

您可以使用图片元素。请参见

首先摆脱所有引导，因为它丑陋且令人困惑，没有它您可以摆脱3个额外的容器div，而且它显然还不支持flexbox？（Bootstrap 4应该在它不存在的情况下使用它，我不知道，因为如果你不知道的话，我宁愿不使用Bootstrap） 然后使用flexbox并将img设置为

max width:100%以保持纵横比。根据需要处理
justify content
：


.logos{
dislay：flex；
弯曲方向：立柱；
}
.顶级标志{
显示器：flex；
证明内容：中心；
}
.底部徽标{
显示器：flex；
证明内容：周围的空间；
}
img{
最大宽度：100%；
}

谢谢！！但我不认为这是Github网站上发生的事情（至少我没有找到任何关于它的信息）。我不知道它是像Bootstrap的
img responsive
（已经尝试过这个；没有发生任何事情）还是另一个Bootstrap的类（因为我认为它也是由Bootstrap的创始人之一重建的），或者甚至根本没有Bootstrap。没问题！使用
.img responsive
将不起作用，因为您已将图像设置为
内联块
。但是，此类使用
display:block
。我认为Github正在使用flexbox。但是，你不想用这个，对吗？因此，我仍然建议使用媒体查询。希望这有帮助！不，不，对不起！你可能误解了。我在使用flexbox方面没有问题，唯一的问题是我不能用作引导类，因为它在3.3.7中不受支持（它在引导4上，但在alpha上）。哦，太酷了。然后，如果您愿意，您可以随时使用flexbox。很抱歉，回答这个问题花了这么长时间。我再次阅读了Github的这部分代码，发现他们实际上使用了媒体查询来完成这项工作。谢谢你的回答！！我更新了另一个，但什么也没发生。谢谢！！它起作用了，但是为了让所有的图像保持在一行中。我想把它包装成Github网站上这个徽标的部分。我试图设置
flex-wrap:wrap（与Github的代码相同），但是调整大小不起作用。
@media (max-width: 768px /* Or whatever you want */) {
   .logos .logo-image {
      width: 100px; /* Once again, whatever you want */
   }
}