bootstrap 框架为现代网页开发提供了强大的响应式能力，其导航栏（navbar）组件是构建适应不同屏幕尺寸界面的核心元素。在桌面端，导航栏通常以完整菜单形式展示；而在小屏幕设备上，为了节省空间，导航栏会自动折叠，并通过一个“汉堡包”图标（通常是三条横线）来切换菜单的显示与隐藏。用户点击此图标时，折叠的菜单会展开，再次点击则收起。
然而，开发者在使用 Bootstrap 4.4 版本时，有时会遇到一个令人困惑的问题：在小屏幕下，导航栏的折叠功能正常工作，点击空白区域或预期位置也能触发菜单的展开和收起，但“汉堡包”图标本身却完全不可见。这使得用户无法直观地发现导航菜单的存在，严重影响用户体验。
“汉堡包”图标不显示，但其功能（点击区域）却正常工作，这通常不是因为JavaScript逻辑错误，而是由于样式（CSS）未能正确加载或渲染。在 Bootstrap 4 中，这个图标是通过 navbar-toggler-icon 类结合 CSS 伪元素和背景图片来实现的。如果相关的 CSS 样式缺失、加载失败或被其他样式覆盖，图标就无法显示。
导致此问题的最常见原因包括：
解决此问题的关键在于确保正确且完整地引入所有 Bootstrap 必需的 CSS 和 JavaScript 文件，并遵循正确的加载顺序。以下是一个完整的 HTML 结构示例，展示了如何正确配置 Bootstrap 4.4 导航栏，以确保汉堡包图标正常显示：
<!doctype html>
<html lang="en">
<head>
<!-- 必要的元数据标签 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Bootstrap 导航栏示例</title>
</head>
<body>
<!-- 导航栏示例 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<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="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</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">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<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-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<!-- 必要的 JavaScript 脚本，放置在 </body> 结束标签之前 -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>上述代码示例包含了正确实现 Bootstrap 4.4 导航栏所需的全部元素和依赖：
<head> 中的 Bootstrap CSS：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
这是 Bootstrap 4.4.1 的核心 CSS 文件。navbar-toggler-icon 的样式定义就包含在这个文件中。确保此链接有效且文件能够被浏览器成功加载是图标显示的前提。
导航栏结构：
<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>
</body> 结束标签前的 JavaScript 脚本：
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
关键点： 这三个脚本的加载顺序至关重要。必须先加载 jQuery，然后是 Popper.js，最后才是 Bootstrap JS。如果顺序错误，Bootstrap 插件可能无法正确初始化。
Bootstrap 导航栏的“汉堡包”图标不显示但功能正常，是一个常见的由资源加载不当或依赖顺序错误引起的配置问题。通过仔细检查并确保所有 Bootstrap 4.4 的 CSS、jQuery、Popper.js 和 Bootstrap JS 文件都已正确、完整地引入，并且按照正确的顺序放置在 HTML 文档中，即可有效解决此问题。遵循本文提供的示例代码和最佳实践，可以确保您的 Bootstrap 导航栏在所有设备上都能正常工作并提供良好的用户体验。
以上就是解决 Bootstrap 4.4 导航栏折叠图标不显示但功能正常的问题的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
318
收藏
