Bootstrap 4导航栏：阻止购物车图标随折叠菜单隐藏的方法

这个需求很常见，我来给你个简单的实现方案，核心思路就是把购物车图标移出Bootstrap导航栏的折叠容器（navbar-collapse），让它成为导航栏的直接子元素，这样就不会被汉堡菜单收纳了。

修改后的完整HTML结构 #

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
  <!-- 网站品牌 -->
  <a class="navbar-brand" href="index.php">你的品牌名称</a>

  <!-- 购物车图标：放在折叠容器外，不会被收纳 -->
  <div class="d-flex align-items-center ml-auto mr-3">
    <a href="cart.php" class="text-white">
      <i class="fas fa-shopping-cart fa-lg"></i>
      <!-- 可选：添加购物车数量徽章 -->
      <span class="badge badge-danger ml-1">3</span>
    </a>
  </div>

  <!-- 汉堡菜单按钮 -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <!-- 折叠的导航内容：这里的元素会在小屏幕被收纳进汉堡菜单 -->
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">首页 <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">商品</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          分类
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">分类1</a>
          <a class="dropdown-item" href="#">分类2</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">更多分类</a>
        </div>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="搜索" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
    </form>
  </div>
</nav>

关键细节解释 #

• 位置调整：把购物车图标放在navbar-toggler的前面，用ml-auto让它自动靠向导航栏右侧，和左侧的品牌、右侧的汉堡菜单保持合理间距。
• 垂直居中：d-flex align-items-center确保购物车图标和导航栏内的其他元素（品牌文字、汉堡按钮）垂直对齐，避免视觉错位。
• 响应式兼容：因为没有把购物车放进collapse容器，所以不管屏幕宽度是否达到lg断点（Bootstrap 4默认是992px），它都会一直显示在导航栏上。
• 可选优化：如果需要调整图标大小，可以用Font Awesome的尺寸类（比如fa-lg、fa-2x），或者自定义CSS修改font-size；数量徽章可以根据需求调整样式。

额外提示 #

如果你的购物车图标原本是在折叠菜单的右侧（比如和搜索框在一起），只需要把它单独移出来放在navbar-collapse外面，保持ml-auto类就能让它继续靠右显示，不会影响原有布局逻辑。

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