Bootstrap导航栏移动端与桌面端不同Logo显示问题咨询

首先看你代码里的明显错误：移动端Logo的<img>标签中，class属性没有正确闭合——你写的是class="mobile /，应该改成class="mobile"，这是导致移动端Logo不显示的核心原因。

修正后的完整代码如下：

<style>
  .mobile {
    display: none !important;
  }
  @media (max-width: 600px) {
    .mobile {
      display: block;
    }
    .desktop {
      display: none;
    }
  }
</style>
<div>
  <img src="/img/logo_desktop.png" class="desktop" />
  <img src="/img/logo_mobile.png" class="mobile" />
</div>

另外补充几个注意点：

• 确认/img/logo_mobile.png的路径正确，可直接在浏览器地址栏输入该路径验证是否能打开图片
• Firefox响应式模式测试时，确保已经切换到对应宽度（≤600px）的视图，并且刷新页面重新加载样式
• 如果仍有问题，可以给.mobile和.desktop的img标签加上width: 100%;或者固定宽度，避免图片尺寸异常导致显示问题

内容的提问来源于stack exchange，提问作者www.friend0.in