Bootstrap导航栏切换按钮异常求助：始终处于展开状态且点击无响应

我帮你梳理了代码里的几个关键问题，这些都会导致导航栏切换按钮（navbar toggler）无法正常工作：

1. CSS引入顺序错误 #

你把自定义的Instapage CSS放在了Bootstrap CSS之前，这会导致Bootstrap的核心样式被自定义样式覆盖，进而影响导航栏的折叠/展开逻辑。正确的引入顺序应该是先加载Bootstrap的CSS，再加载自定义样式。

2. 导航链接缺少必要的类 #

你的.nav-item下的<a>标签没有添加.nav-link类，虽然这不会直接导致切换按钮失效，但会破坏导航项的默认样式和交互行为，建议补上这个类。

修正后的完整代码示例 #

<!-- 先引入Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- 再引入自定义CSS -->
<link rel="stylesheet" type="text/css" href="//storage.googleapis.com/instapage-app-assets/134/031a761e2b05d2bed213fd1f07412755.css" media="screen" />
<link href="https://fonts.googleapis.com/css?family=Work+Sans:300i,400,400i,600,600i,700,700i,800&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">

<!-- JS引入顺序保持正确：jQuery → Popper → Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<header>
<nav class="navbar navbar-expand-xl navbar-light border-bottom box-shadow py-2">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="logo.png" alt="Logo" />
</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">
<li class="nav-item active homeNavLink">
<a href="/home" class="nav-link">Home</a>
</li>
<li class="nav-item"><a href="/link1" class="nav-link">Link1</a></li>
<li class="nav-item"><a href="/link2" class="nav-link">Link2</a></li>
<li class="nav-item"><a href="/link3" class="nav-link">Link3</a></li>
<li class="nav-item"><a href="/link4" class="nav-link">Link4</a></li>
<li class="nav-item">
<button type="button" class="btn btn-primary">
<a href="/login" class="linkInNav text-white">Sign in</a>
</button>
</li>
</ul>
</div>
</div>
</nav>
</header>

额外优化点 #

• 我把原来的<div type="button">改成了<button>标签，更符合语义化规范，避免不必要的样式冲突。
• 给logo图片添加了alt属性，提升页面可访问性。

调整完这些之后，刷新页面测试，导航栏切换按钮应该就能正常折叠/展开了。如果还是有问题，可以检查浏览器控制台是否有JS报错，看看是否存在其他脚本冲突的情况。

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