我正在努力理解以下代码为何无法正常工作。
页脚中的.js脚本似乎根本不起作用，包括.css在内的所有3个脚本今天都直接从“ GetBoostrap”中获取，并且是它们的建议版本，所以不知道为什么它们不起作用当它们本地存储在我的PC上并且代码中显示的所有文件路径均正确时。 CSS可以正常工作，并且使用与.js文件相同的路径样式。此外，.js文件的顺序完全符合GetBootstrap的指示。
使用的脚本版本如下（并且是所有可用的最新版本）：
请忽略中间使用的伪文本-只是在其中添加一些结构到页面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>PAGE TITLE HERE</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div class="col-xs-10">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam neque risus, accumsan vestibulum facilisis in, elementum at arcu. Vestibulum maximus egestas justo, nec euismod elit auctor et. Nam a enim neque. Nullam urna mauris, scelerisque sed rhoncus at, porta at ligula. Cras feugiat, neque non tempus congue, est neque efficitur velit, eget luctus lacus enim luctus lorem. Pellentesque a justo a ligula viverra fringilla vel id metus. Integer tempor pharetra dictum. Suspendisse potenti.</p>
<p>Morbi ultricies orci eros. Fusce iaculis leo in sapien suscipit, ac eleifend nibh viverra. Pellentesque dictum bibendum quam eu pretium. In luctus interdum consectetur. Aenean blandit eros in turpis aliquet imperdiet. Fusce finibus odio non dui volutpat rhoncus. Praesent sed congue orci. Mauris rutrum finibus nisi, vel porttitor odio cursus et. Sed eget sem nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque maximus magna ex, sagittis sodales odio consectetur sit amet. Cras ullamcorper molestie turpis ac porttitor. Aenean pretium augue velit, nec laoreet magna elementum a. Suspendisse nec tincidunt nunc. Nullam porta mi non neque pharetra congue.</p>
<p>Nunc non porttitor enim. Sed quis arcu risus. Sed eleifend, justo eu volutpat posuere, metus est placerat sem, vel elementum felis ante eget dolor. Ut at urna metus. Duis convallis elit ut facilisis tristique. Etiam eget pulvinar mi. Nullam vitae tempor ante, eget venenatis ipsum. Fusce lobortis sollicitudin tortor eu pulvinar. Suspendisse potenti. Aenean id ante quis velit dapibus commodo. Mauris convallis venenatis odio, eu tincidunt enim rhoncus ut. Nunc commodo urna sapien, quis interdum turpis accumsan fermentum. Quisque auctor velit vel tincidunt interdum. Proin vehicula, justo nec lacinia rutrum, mauris risus mollis quam, ut mattis ex turpis in augue. Suspendisse elit nisl, semper quis erat a, congue egestas tortor. Suspendisse ultrices elementum consectetur.</p>
<p>Suspendisse lacus neque, ornare eget blandit vel, elementum vitae ex. Curabitur eros metus, ullamcorper et finibus et, elementum in mi. Suspendisse mattis ex id libero pretium aliquam. Ut posuere, erat vitae aliquet ornare, purus urna laoreet arcu, non consectetur metus purus et eros. Etiam nec odio ex. Donec sed lorem lobortis sapien sagittis bibendum. Fusce lorem enim, efficitur eget ipsum vitae, tempus pretium risus. Mauris nisl justo, faucibus et magna cursus, iaculis egestas ligula. Cras iaculis consequat dolor id pretium. Sed vitae posuere lorem.</p>
<p>Maecenas in lacus sit amet elit malesuada consectetur. Etiam enim tellus, mattis sed justo vitae, tincidunt congue velit. Nulla vitae elementum mauris. Donec sit amet suscipit neque. Aenean odio nulla, tristique et cursus ornare, laoreet ut velit. Sed tortor sapien, condimentum ac scelerisque sit amet, lobortis a tellus. Cras aliquam fermentum nisl, quis efficitur elit tempus et. In tincidunt purus sit amet nisi malesuada blandit. Suspendisse suscipit felis in justo tincidunt viverra. Mauris sagittis rutrum ligula, posuere dignissim sem laoreet id. Aliquam velit magna, sodales non pellentesque sit amet, dapibus ut mauris. Cras vel tristique dui.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam neque risus, accumsan vestibulum facilisis in, elementum at arcu. Vestibulum maximus egestas justo, nec euismod elit auctor et. Nam a enim neque. Nullam urna mauris, scelerisque sed rhoncus at, porta at ligula. Cras feugiat, neque non tempus congue, est neque efficitur velit, eget luctus lacus enim luctus lorem. Pellentesque a justo a ligula viverra fringilla vel id metus. Integer tempor pharetra dictum. Suspendisse potenti.</p>
<p>Morbi ultricies orci eros. Fusce iaculis leo in sapien suscipit, ac eleifend nibh viverra. Pellentesque dictum bibendum quam eu pretium. In luctus interdum consectetur. Aenean blandit eros in turpis aliquet imperdiet. Fusce finibus odio non dui volutpat rhoncus. Praesent sed congue orci. Mauris rutrum finibus nisi, vel porttitor odio cursus et. Sed eget sem nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque maximus magna ex, sagittis sodales odio consectetur sit amet. Cras ullamcorper molestie turpis ac porttitor. Aenean pretium augue velit, nec laoreet magna elementum a. Suspendisse nec tincidunt nunc. Nullam porta mi non neque pharetra congue.</p>
<p>Nunc non porttitor enim. Sed quis arcu risus. Sed eleifend, justo eu volutpat posuere, metus est placerat sem, vel elementum felis ante eget dolor. Ut at urna metus. Duis convallis elit ut facilisis tristique. Etiam eget pulvinar mi. Nullam vitae tempor ante, eget venenatis ipsum. Fusce lobortis sollicitudin tortor eu pulvinar. Suspendisse potenti. Aenean id ante quis velit dapibus commodo. Mauris convallis venenatis odio, eu tincidunt enim rhoncus ut. Nunc commodo urna sapien, quis interdum turpis accumsan fermentum. Quisque auctor velit vel tincidunt interdum. Proin vehicula, justo nec lacinia rutrum, mauris risus mollis quam, ut mattis ex turpis in augue. Suspendisse elit nisl, semper quis erat a, congue egestas tortor. Suspendisse ultrices elementum consectetur.</p>
<p>Suspendisse lacus neque, ornare eget blandit vel, elementum vitae ex. Curabitur eros metus, ullamcorper et finibus et, elementum in mi. Suspendisse mattis ex id libero pretium aliquam. Ut posuere, erat vitae aliquet ornare, purus urna laoreet arcu, non consectetur metus purus et eros. Etiam nec odio ex. Donec sed lorem lobortis sapien sagittis bibendum. Fusce lorem enim, efficitur eget ipsum vitae, tempus pretium risus. Mauris nisl justo, faucibus et magna cursus, iaculis egestas ligula. Cras iaculis consequat dolor id pretium. Sed vitae posuere lorem.</p>
<p>Maecenas in lacus sit amet elit malesuada consectetur. Etiam enim tellus, mattis sed justo vitae, tincidunt congue velit. Nulla vitae elementum mauris. Donec sit amet suscipit neque. Aenean odio nulla, tristique et cursus ornare, laoreet ut velit. Sed tortor sapien, condimentum ac scelerisque sit amet, lobortis a tellus. Cras aliquam fermentum nisl, quis efficitur elit tempus et. In tincidunt purus sit amet nisi malesuada blandit. Suspendisse suscipit felis in justo tincidunt viverra. Mauris sagittis rutrum ligula, posuere dignissim sem laoreet id. Aliquam velit magna, sodales non pellentesque sit amet, dapibus ut mauris. Cras vel tristique dui.</p>
</div>
</div>
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h2>Jumbatron</h2>
<h6>This is an example of the use of a Jumbatron on the page. It can hold all sorts of content and is a good way to break up long sections of page content or draw a users eye to specific content that you would like them to see. The title in this Jumbatron is using the H2 tag where as the main body of content is using the H6 tag.</h6>
</div>
</div>
<div class="container">
<div class="col-xs-10">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam neque risus, accumsan vestibulum facilisis in, elementum at arcu. Vestibulum maximus egestas justo, nec euismod elit auctor et. Nam a enim neque. Nullam urna mauris, scelerisque sed rhoncus at, porta at ligula. Cras feugiat, neque non tempus congue, est neque efficitur velit, eget luctus lacus enim luctus lorem. Pellentesque a justo a ligula viverra fringilla vel id metus. Integer tempor pharetra dictum. Suspendisse potenti.</p>
<p>Morbi ultricies orci eros. Fusce iaculis leo in sapien suscipit, ac eleifend nibh viverra. Pellentesque dictum bibendum quam eu pretium. In luctus interdum consectetur. Aenean blandit eros in turpis aliquet imperdiet. Fusce finibus odio non dui volutpat rhoncus. Praesent sed congue orci. Mauris rutrum finibus nisi, vel porttitor odio cursus et. Sed eget sem nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque maximus magna ex, sagittis sodales odio consectetur sit amet. Cras ullamcorper molestie turpis ac porttitor. Aenean pretium augue velit, nec laoreet magna elementum a. Suspendisse nec tincidunt nunc. Nullam porta mi non neque pharetra congue.</p>
<p>Nunc non porttitor enim. Sed quis arcu risus. Sed eleifend, justo eu volutpat posuere, metus est placerat sem, vel elementum felis ante eget dolor. Ut at urna metus. Duis convallis elit ut facilisis tristique. Etiam eget pulvinar mi. Nullam vitae tempor ante, eget venenatis ipsum. Fusce lobortis sollicitudin tortor eu pulvinar. Suspendisse potenti. Aenean id ante quis velit dapibus commodo. Mauris convallis venenatis odio, eu tincidunt enim rhoncus ut. Nunc commodo urna sapien, quis interdum turpis accumsan fermentum. Quisque auctor velit vel tincidunt interdum. Proin vehicula, justo nec lacinia rutrum, mauris risus mollis quam, ut mattis ex turpis in augue. Suspendisse elit nisl, semper quis erat a, congue egestas tortor. Suspendisse ultrices elementum consectetur.</p>
<p>Suspendisse lacus neque, ornare eget blandit vel, elementum vitae ex. Curabitur eros metus, ullamcorper et finibus et, elementum in mi. Suspendisse mattis ex id libero pretium aliquam. Ut posuere, erat vitae aliquet ornare, purus urna laoreet arcu, non consectetur metus purus et eros. Etiam nec odio ex. Donec sed lorem lobortis sapien sagittis bibendum. Fusce lorem enim, efficitur eget ipsum vitae, tempus pretium risus. Mauris nisl justo, faucibus et magna cursus, iaculis egestas ligula. Cras iaculis consequat dolor id pretium. Sed vitae posuere lorem.</p>
<p>Maecenas in lacus sit amet elit malesuada consectetur. Etiam enim tellus, mattis sed justo vitae, tincidunt congue velit. Nulla vitae elementum mauris. Donec sit amet suscipit neque. Aenean odio nulla, tristique et cursus ornare, laoreet ut velit. Sed tortor sapien, condimentum ac scelerisque sit amet, lobortis a tellus. Cras aliquam fermentum nisl, quis efficitur elit tempus et. In tincidunt purus sit amet nisi malesuada blandit. Suspendisse suscipit felis in justo tincidunt viverra. Mauris sagittis rutrum ligula, posuere dignissim sem laoreet id. Aliquam velit magna, sodales non pellentesque sit amet, dapibus ut mauris. Cras vel tristique dui.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam neque risus, accumsan vestibulum facilisis in, elementum at arcu. Vestibulum maximus egestas justo, nec euismod elit auctor et. Nam a enim neque. Nullam urna mauris, scelerisque sed rhoncus at, porta at ligula. Cras feugiat, neque non tempus congue, est neque efficitur velit, eget luctus lacus enim luctus lorem. Pellentesque a justo a ligula viverra fringilla vel id metus. Integer tempor pharetra dictum. Suspendisse potenti.</p>
<p>Morbi ultricies orci eros. Fusce iaculis leo in sapien suscipit, ac eleifend nibh viverra. Pellentesque dictum bibendum quam eu pretium. In luctus interdum consectetur. Aenean blandit eros in turpis aliquet imperdiet. Fusce finibus odio non dui volutpat rhoncus. Praesent sed congue orci. Mauris rutrum finibus nisi, vel porttitor odio cursus et. Sed eget sem nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque maximus magna ex, sagittis sodales odio consectetur sit amet. Cras ullamcorper molestie turpis ac porttitor. Aenean pretium augue velit, nec laoreet magna elementum a. Suspendisse nec tincidunt nunc. Nullam porta mi non neque pharetra congue.</p>
<p>Nunc non porttitor enim. Sed quis arcu risus. Sed eleifend, justo eu volutpat posuere, metus est placerat sem, vel elementum felis ante eget dolor. Ut at urna metus. Duis convallis elit ut facilisis tristique. Etiam eget pulvinar mi. Nullam vitae tempor ante, eget venenatis ipsum. Fusce lobortis sollicitudin tortor eu pulvinar. Suspendisse potenti. Aenean id ante quis velit dapibus commodo. Mauris convallis venenatis odio, eu tincidunt enim rhoncus ut. Nunc commodo urna sapien, quis interdum turpis accumsan fermentum. Quisque auctor velit vel tincidunt interdum. Proin vehicula, justo nec lacinia rutrum, mauris risus mollis quam, ut mattis ex turpis in augue. Suspendisse elit nisl, semper quis erat a, congue egestas tortor. Suspendisse ultrices elementum consectetur.</p>
<p>Suspendisse lacus neque, ornare eget blandit vel, elementum vitae ex. Curabitur eros metus, ullamcorper et finibus et, elementum in mi. Suspendisse mattis ex id libero pretium aliquam. Ut posuere, erat vitae aliquet ornare, purus urna laoreet arcu, non consectetur metus purus et eros. Etiam nec odio ex. Donec sed lorem lobortis sapien sagittis bibendum. Fusce lorem enim, efficitur eget ipsum vitae, tempus pretium risus. Mauris nisl justo, faucibus et magna cursus, iaculis egestas ligula. Cras iaculis consequat dolor id pretium. Sed vitae posuere lorem.</p>
<p>Maecenas in lacus sit amet elit malesuada consectetur. Etiam enim tellus, mattis sed justo vitae, tincidunt congue velit. Nulla vitae elementum mauris. Donec sit amet suscipit neque. Aenean odio nulla, tristique et cursus ornare, laoreet ut velit. Sed tortor sapien, condimentum ac scelerisque sit amet, lobortis a tellus. Cras aliquam fermentum nisl, quis efficitur elit tempus et. In tincidunt purus sit amet nisi malesuada blandit. Suspendisse suscipit felis in justo tincidunt viverra. Mauris sagittis rutrum ligula, posuere dignissim sem laoreet id. Aliquam velit magna, sodales non pellentesque sit amet, dapibus ut mauris. Cras vel tristique dui.</p>
</div>
</div>
<footer>
<script src="js/jquery-3.3.1.js"></script>
<script src="js/popper.js"></script>
<script src="js/bootstrap.js"></script>
</footer>
</body>
</html>
答案 0 :(得分：0)
我已经意识到问题出在哪里，我觉得自己是个白痴，没有早日意识到...
实际上，脚本确实可以正常运行，我认为应该是这样，不起作用的是我放入的导航代码（由于脚本而无法运行）。
结果是，我在导航中使用的是Bootstrap 3代码，而不是我有意设置的Bootstrap 4。新秀错误！
一个可行的导航示例是：
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<a class="navbar-brand" href="#">Logo</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</nav>