Bootstrap导航在新版bootstrap.min.css失效，旧版本正常求助

你遇到的问题核心是Bootstrap 4对导航组件的类名做了重大调整，而你的代码还沿用了旧版（Bootstrap 3）的类，导致和新版CSS不兼容。下面是具体的修复方案：

关键修改点 #

Bootstrap 4废弃了很多Bootstrap 3的导航类，替换成了更清晰的新命名：

• 把navbar-inverse替换为navbar-dark bg-dark（你的导航背景是黑色，这个组合能正确渲染深色导航栏的文字和背景样式）
• 把navbar-toggleable-sm替换为navbar-expand-sm（这个是Bootstrap 4里控制小屏幕折叠的核心类，旧的toggleable类在4.x版本中已被移除，这也是你折叠功能失效的直接原因）

修改后的完整代码 #

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
<meta http-equiv="x-ua-compatible" content="ie=edge"> 
<!-- 现在可以正常启用Bootstrap 4 Beta的CSS了 -->
<link rel="stylesheet" href="vendor/bootstrap/bootstrap4.0beta/css/bootstrap.css"> 
<title>Salapaka Lab</title> 
</head> 
<body> 
<!-- 替换导航栏类：navbar-inverse → navbar-dark bg-dark；navbar-toggleable-sm → navbar-expand-sm -->
<nav class="navbar fixed-top navbar-dark bg-dark navbar-expand-sm"> 
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#myMenu" aria-controls="myMenu" aria-expanded="false" aria-label="Toggle Navigation"> 
<span class="navbar-toggler-icon"></span> 
</button> 
<a href="#" class="navbar-brand">Salapaka Lab</a> 
<div class="collapse navbar-collapse" id="myMenu"> 
<div class="navbar-nav"> 
<a class="nav-item nav-link active" href="#">Home</a> 
<a class="nav-item nav-link" href="#">People</a> 
<a class="nav-item nav-link" href="#">Publications</a> 
<a class="nav-item nav-link" href="#">Downloads</a> 
<a class="nav-item nav-link" href="#">Contact</a> 
</div><!-- navbar-nav --> 
</div><!-- collapse --> 
</nav><!-- nav --> 
<script src="vendor/jquery/jquery-3.2.1.min.js" type="text/javascript"></script> 
<script src="vendor/bootstrap/bootstrap4.0beta/js/bootstrap.min.js" type="text/javascript"></script> 
</body> 
</html>

为什么这样修改？ #

• navbar-expand-sm：这个类告诉Bootstrap，当屏幕宽度小于sm（576px）时自动折叠成汉堡菜单，大于该宽度时显示完整导航链接。旧版的navbar-toggleable-sm在Bootstrap 4 Beta中已被重命名，这是导致折叠功能失效的核心原因。
• navbar-dark bg-dark：Bootstrap 4用navbar-dark定义导航栏文字为浅色，配合bg-dark设置深色背景，完美替代了Bootstrap 3的navbar-inverse类。

修改后，你的汉堡菜单折叠功能就能在Bootstrap 4 Beta的CSS下正常工作，同时兼容你当前使用的Bootstrap 4 Beta JS文件。

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