Bootstrap5中navbar-expand-lg下992px以下导航图标不显示问题

问题诊断 #

导致折叠按钮图标无法显示的核心原因有三个：

• Bootstrap版本属性不兼容：你使用了Bootstrap 4的data-toggle和data-target属性，但Bootstrap 5已将这类交互属性的前缀改为data-bs-，旧属性无法触发组件逻辑，也会影响图标的正常渲染。
• 导航栏缺少主题类：navbar组件必须搭配navbar-light或navbar-dark类，navbar-toggler-icon的颜色是基于这些主题类生成的，没有主题类的话，图标颜色会和导航栏背景一致，导致视觉上不可见。
• 导航栏按钮结构不规范：“Get a quote”按钮直接放在navbar-nav里不符合Bootstrap的布局规范，会破坏导航栏的结构一致性。

修复步骤 #

1. 替换折叠按钮的交互属性
   将原按钮代码中的data-toggle改为data-bs-toggle，data-target改为data-bs-target：

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navmenu">
  <span class="navbar-toggler-icon"></span>
</button>

2. 为导航栏添加主题类
   根据设计需求，给navbar添加navbar-light bg-light（浅色主题）或navbar-dark bg-dark（深色主题）类，示例：

<nav class="navbar navbar-expand-lg navbar-light bg-light">

3. 修正导航栏按钮结构
   把“Get a quote”按钮用li.nav-item包裹，并添加Bootstrap按钮类（比如btn btn-primary），保证布局一致性：

<li class="nav-item">
  <button class="btn btn-primary">Get a quote</button>
</li>

完整修复代码 #

<!doctype html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <!-- Own Css -->
  <link rel="stylesheet" href="css/style.css">
  <title>Tropico</title>
</head>
<body>
  <!-- Section - 1 Navigation Starts -->
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
      <a href="#" class="navbar-brand"><img src="img/logo.png" alt=""><span>Tropico</span></a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navmenu">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navmenu">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item">
            <a href="#home" class="nav-link">Home</a>
          </li>
          <li class="nav-item">
            <a href="#fruits" class="nav-link">Fruits</a>
          </li>
          <li class="nav-item">
            <a href="#service" class="nav-link">Services</a>
          </li>
          <li class="nav-item">
            <a href="#contact" class="nav-link">Contact us</a>
          </li>
          <li class="nav-item">
            <button class="btn btn-primary">Get a quote</button>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <!-- Section - 1 Navigation End -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
    crossorigin="anonymous"></script>
</body>
</html>

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