如何在Bootstrap导航栏中根据屏幕尺寸切换Logo？

当然可以实现，给你几种简单可行的方案：

方案1：用Bootstrap响应式显示类直接控制两个Logo #

直接在navbar-brand里放两张图片，利用Bootstrap的响应式显示类（比如d-none d-md-block、d-block d-md-none）控制不同屏幕下的显示逻辑，大屏幕（≥768px）显示mylogo.png，小屏幕显示mylogosmall.png：

<nav class="navbar fixed-top">
  <div class="navbar-brand-wrapper d-flex align-items-center justify-content-center">
    <a class="navbar-brand" href="/">
      <!-- 大屏幕显示的Logo -->
      <img src="mylogo.png" alt="TopLogo" class="d-none d-md-block">
      <!-- 小屏幕显示的Logo -->
      <img src="mylogosmall.png" alt="TopLogo" class="d-block d-md-none">
    </a>
  </div>
  <ul class="nav navbar-nav-right">
    <li class="nav-link"><a href="{% url 'index' %}">Top</a></li>
    <li class="nav-link"><a href="{% url 'dashboard' %}">Dashboard</a></li>
  
    <li class="nav-link">{{ user.email }}</li>
    <li class="nav-link"><a href="{% url 'logout' %}" type="button" class="btn btn-primary btn-sm">Logout</a></li>
  </ul>
</nav>

你可以根据需求替换断点类，比如用d-lg-block对应≥992px的大屏幕，调整切换的屏幕阈值。

方案2：用CSS媒体查询切换Logo #

给Logo图片加自定义类，通过CSS媒体查询在不同屏幕尺寸下修改图片资源：

HTML修改： #

<nav class="navbar fixed-top">
  <div class="navbar-brand-wrapper d-flex align-items-center justify-content-center">
    <a class="navbar-brand" href="/">
      <img src="mylogo.png" alt="TopLogo" class="responsive-logo">
    </a>
  </div>
  <!-- 其余导航代码不变 -->
</nav>

CSS代码： #

/* 小屏幕（<768px）时替换Logo */
@media (max-width: 767.98px) {
  .responsive-logo {
    content: url('mylogosmall.png');
  }
}

这种方法只需要一个图片标签，通过CSS动态替换资源，适合不想多写HTML标签的场景。

方案3：用HTML <picture> 元素 #

利用HTML原生的<picture>元素，它会自动匹配媒体条件加载对应图片，Bootstrap完全兼容这种写法：

<nav class="navbar fixed-top">
  <div class="navbar-brand-wrapper d-flex align-items-center justify-content-center">
    <a class="navbar-brand" href="/">
      <picture>
        <!-- 小屏幕加载小Logo -->
        <source media="(max-width: 767.98px)" srcset="mylogosmall.png">
        <!-- 默认加载大Logo -->
        <img src="mylogo.png" alt="TopLogo">
      </picture>
    </a>
  </div>
  <!-- 其余导航代码不变 -->
</nav>

<picture>会优先加载符合媒体条件的<source>资源，没有匹配到则使用默认的<img>，这种写法更符合HTML语义化，还能节省小屏幕设备的带宽。

内容的提问来源于stack exchange，提问作者whitebear