我从 Coursera 下载了一些非常简单的代码，用于响应式 Web 设计类(class)，以解决切换导航栏的问题，并且似乎是 Bootstrap 大约 3.7(随类(class)代码一起提供)，非常基本的代码运行良好。
但是，在重新下载最新的 Bootstrap 后，代码显示不正确，我无法弄清楚问题出在哪里。我附上了截图。请注意，在显示不正确的那些中，单击小平面按钮将显示其他元素，但只显示大约半秒钟就消失了。其他多名学生也遇到了完全相同的问题并在论坛上发帖，但没有版主或导师能够正确建议，所以我祈祷你们能提供帮助!
这里有什么问题？是最新的 Bootstrap 中不存在的类/类属性吗？
页面的正确显示(BS ~3.7 的外观):
BS 4.2 的外观，显示不正确:
新的 Bootswatch 主题 (Slate) 显示不正确时的外观:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<link href="css/bootstrap.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"> </script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Edward MonteVerde</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">CV</a></li>
<li><a href="#">Portfolio</a></li>
<!-- here is the dropdown menu -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Contact <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Email</a></li>
<li><a href="#">Skype</a></li>
<!-- can you add another item to the dropdown? -->
</ul>
</li>
<!-- the end of the dropdown menu -->
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
最佳答案
NOTE: If paid professors and/or mentors cannot tell you how to fix this very basic problem, stop paying them and try to recover any money you've already given them.
如果不对您的应用程序/代码进行重大更改，您通常无法升级工具的“主要”版本。这是使用版本号的任何东西的一般规则(例如，大多数软件，尤其是 npm 上的任何东西)。 “主要”版本是版本号中最左边的数字。
v2.3
v3.1
v4.21
Read more about semantic versioning here: https://semver.org/
在您的例子中，您将从主要版本 3 转到主要版本 4。快速查看 bootstrap navbar in version 4 ，与您发布的代码相比，很多事情都发生了变化。我用更新后的代码创建了一个 fiddle (注意，调整预览面板的大小以查看它从汉堡包切换到扩展)。
https://jsfiddle.net/m8gfhr95/
这是一个基本片段。记下 nav 元素上的类，以及 li 和 a 元素:
<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>
</ul>
</div>
</nav>
关于html - Bootstrap ~3.7 和最新 Bootstrap 之间简单代码的样式问题 (4)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54409523/