Bootstrap导航栏切换按钮href失效：点击购物车无法跳转至cart.php

首先得明确：Bootstrap的navbar-toggler按钮核心作用是折叠/展开导航栏菜单，它本身不是用来做页面跳转的，你现在的代码犯了两个关键错误：

1. data-target属性用错了：这个属性的值应该是你要折叠的导航栏容器的CSS选择器（通常是带ID的.collapse.navbar-collapse元素，比如#navbarResponsive），而不是跳转页面cart.php。把它写成页面地址，既会导致折叠功能失效，也和跳转需求完全冲突。
2. <button>元素不支持href属性：浏览器根本不会识别按钮上的href属性，所以点击它自然不会触发页面跳转。

下面给你两种符合需求的正确实现方式，你可以根据实际场景选择：

方式一：购物车是独立的跳转按钮（无需折叠菜单） #

如果这个按钮只是用来跳转到购物车页面，不需要承担折叠导航栏的功能，直接把<button>改成<a>标签，同时保留navbar-toggler的样式即可：

<a class="navbar-toggler" href="cart.php" aria-label="Go to cart">
  <i class="icono-navbar icon-shopping-cart"></i>
</a>

方式二：购物车是折叠菜单里的导航项（标准Bootstrap导航栏结构） #

如果这是小屏幕下的导航栏折叠开关，而购物车是菜单中的一个选项，那你需要把购物车链接放在折叠容器内，让navbar-toggler只负责展开/折叠菜单：

<!-- 导航栏折叠开关按钮 -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
  <i class="icono-navbar icon-shopping-cart"></i> <!-- 这里也可以换成汉堡图标，看你需求 -->
</button>

<!-- 折叠的导航菜单容器 -->
<div class="collapse navbar-collapse" id="navbarResponsive">
  <ul class="navbar-nav ml-auto">
    <!-- 购物车导航项 -->
    <li class="nav-item">
      <a class="nav-link" href="cart.php">
        <i class="icono-navbar icon-shopping-cart"></i> 购物车
      </a>
    </li>
    <!-- 其他导航项可以放在这里... -->
  </ul>
</div>

简单说，你混淆了navbar-toggler的功能——它是菜单的开关，不是跳转链接。如果要实现跳转，要么用<a>标签直接做按钮，要么把购物车链接放在它控制的折叠菜单里。

内容的提问来源于stack exchange，提问作者Isidro Martínez