Bootstrap 4中导航栏折叠时如何将navbar brand替换为图标？

嘿，这个需求其实挺实用的，我给你分享两种简单的实现方式，不管是换成Font Awesome图标还是自定义图片都能轻松搞定！

方法1：用Bootstrap自带的响应式类（最简便） #

Bootstrap 4自带了一套响应式显示类，我们可以直接用这些类控制不同屏幕下的内容显示，完全不用写额外CSS。步骤很简单：

1. 把原来的Navbar Brand拆成两部分：桌面端显示的文本和移动端折叠时显示的图标/图片
2. 给文本加d-none d-lg-block类（默认隐藏，仅在lg尺寸及以上屏幕显示）
3. 给图标/图片加d-lg-none d-block类（默认显示，在lg尺寸及以上屏幕自动隐藏）

修改后的Navbar Brand代码 #

<a href="#" class="navbar-brand">
  <!-- 桌面端显示的品牌文本 -->
  <span class="d-none d-lg-block">Anime Battlegrounds</span>
  <!-- 移动端折叠时显示的Font Awesome图标 -->
  <i class="fas fa-gamepad d-lg-none d-block"></i>
  <!-- 要是换自定义图片，就把上面的<i>标签换成下面这行 -->
  <!-- <img src="your-custom-logo.png" alt="Anime Battlegrounds Logo" class="d-lg-none d-block" style="height: 30px; width: auto;"> -->
</a>

小提示 #

• 用Font Awesome的话，记得先把它的CSS文件引入到项目里（建议下载本地文件，避免外链）
• 自定义图片可以通过style或者单独写CSS调整尺寸，保证和导航栏高度匹配

方法2：用JavaScript监听折叠事件（适合复杂场景） #

如果想要更灵活的控制（比如切换时加动画效果），可以监听Bootstrap导航栏的折叠/展开事件，动态替换Brand内容：

完整代码示例（基于你的原有代码修改） #

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
  <a href="#" class="navbar-brand" id="navbarBrand">Anime Battlegrounds</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Popular</a>
      <a class="nav-item nav-link active" href="#">Anime List</a>
      <a class="nav-item nav-link active" href="#">Schedule</a>
    </div>
    <div class="navbar-nav ml-auto">
      <a class="nav-item nav-link active" href="#">Sign Up</a>
      <a class="nav-item nav-link active" href="#">Login</a>
    </div>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-primary my-2 my-sm-0 btn1" type="submit">Search</button>
    </form>
  </div>
</nav>

<script>
// 定义切换Brand内容的函数
function updateNavbarBrand() {
  const brandElement = document.getElementById('navbarBrand');
  // Bootstrap 4的lg断点是992px，991px及以下为折叠状态
  if (window.innerWidth <= 991) {
    // 折叠状态显示图标
    brandElement.innerHTML = '<i class="fas fa-gamepad"></i>';
    // 换成图片的话用这行：
    // brandElement.innerHTML = '<img src="your-logo.png" alt="Logo" style="height:30px; width:auto;">';
  } else {
    // 展开状态显示原文本
    brandElement.innerHTML = 'Anime Battlegrounds';
  }
}

// 页面加载时初始化一次
updateNavbarBrand();
// 窗口大小改变时自动更新
window.addEventListener('resize', updateNavbarBrand);
</script>

说明 #

• 这个方法会自动检测屏幕尺寸，在页面加载和窗口缩放时实时切换Brand内容
• 要是需要动画效果，给切换的内容加上CSS过渡属性就行

完整修改后的示例（方法1的完整代码） #

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
  <a href="#" class="navbar-brand">
    <span class="d-none d-lg-block">Anime Battlegrounds</span>
    <i class="fas fa-gamepad d-lg-none d-block"></i>
    <!-- 替换为自定义图片的话用这行： -->
    <!-- <img src="your-logo.png" alt="Anime Battlegrounds" class="d-lg-none d-block" style="height: 30px; width: auto;"> -->
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Popular</a>
      <a class="nav-item nav-link active" href="#">Anime List</a>
      <a class="nav-item nav-link active" href="#">Schedule</a>
    </div>
    <div class="navbar-nav ml-auto">
      <a class="nav-item nav-link active" href="#">Sign Up</a>
      <a class="nav-item nav-link active" href="#">Login</a>
    </div>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-primary my-2 my-sm-0 btn1" type="submit">Search</button>
    </form>
  </div>
</nav>

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