Bootstrap 是一个流行的前端框架,用于快速开发响应式和移动优先的网站。Bootstrap 4.5 是该框架的一个版本,提供了许多组件和工具,以简化网页设计和开发。导航栏(Navbar)是 Bootstrap 中的一个核心组件,用于在页面顶部显示导航链接。
在 iPhone 或 iPad 上,Bootstrap 4.5 的导航栏折叠按钮打开菜单后,菜单会立即关闭。
以下是一些可能的解决方案:
确保在你的 HTML 文件中正确引入了 jQuery 和 Bootstrap 的 JavaScript 文件。
<!-- 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<!-- 引入 Popper.js -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<!-- 引入 Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
确保没有其他 JavaScript 代码干扰了 Bootstrap 的默认事件处理。
$(document).ready(function () {
// 确保没有其他代码干扰 Bootstrap 的事件处理
});
确保没有自定义的 CSS 样式覆盖了 Bootstrap 的默认样式。
/* 确保没有覆盖 Bootstrap 的默认样式 */
.navbar-collapse {
display: block !important;
}
Bootstrap 提供了对触摸事件的支持,确保你的代码正确处理了触摸事件。
<!-- 确保在 HTML 中正确使用了 data-toggle 和 data-target 属性 -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<!-- 导航链接 -->
</div>
以下是一个完整的示例,展示了如何在 Bootstrap 4.5 中正确设置导航栏。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Navbar Example</title>
<!-- 引入 Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
</nav>
<!-- 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<!-- 引入 Popper.js -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<!-- 引入 Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
通过以上步骤,你应该能够解决 Bootstrap 4.5 在 iPhone 或 iPad 上导航栏折叠按钮打开菜单后立即关闭的问题。
领取专属 10元无门槛券
手把手带您无忧上云