我的引导导航栏（HTML、CSS、JS）有问题答案

【问题标题】：Problem with my Bootstrap Navbar (HTML, CSS, JS)我的引导导航栏（HTML、CSS、JS）有问题
【发布时间】：2020-12-21 21:17:13
【问题描述】：

我目前正在开发一个网站。我的导航栏只在 index.html 页面上工作。当我在网络浏览器中打开 aboutme.html 时，我无法点击导航栏上的任何按钮。我复制了标准的 Bootstrap 导航栏并将其设置到中间。

style.css（在 css/style.css 中）：

/* Style Navbar */

.navbar-brand {
    /* logo */
    margin-left: 20vw;
}

/* .active {
    font-weight: 600;
    text-decoration: underline;
} */

.dropdown {
    position: absolute;
    right: 20vw;
}

我没有使用特殊的js文件

【问题讨论】：

您的 blog.html 文件位于 sites 文件夹中，因此请将 <script src="js/jquery-3.5.1.js"></script> 更改为 <script src="../js/jquery-3.5.1.js"></script>

标签： javascript html css twitter-bootstrap navbar

【解决方案1】：

也许尝试加载你用 cmets 标记的脚本。

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

第二种解决方法：尝试检查../css/style.css文件的位置是否正确

<link rel="stylesheet" href="../css/style.css">

【讨论】：

我首先评论的是我的本地引导文件不起作用（idk 为什么）。第二个是旧的引导文件（版本 4.0.0）。这些与我的索引页面上的链接相同（在那里有效）。样式表的位置是对的。
您可以将此代码粘贴到某处以显示其工作原理，将代码粘贴到例如。 Codepen 或 JSFiddle

【解决方案2】：

由于 jquery 文件位置，您的导航栏按钮无法正常工作。您需要像这样更改博客和联系页面的位置代码：

<script src="../js/jquery-3.5.1.js"></script>

您需要更改脚本位置：

<script src="../js/script.js"></script>

【讨论】：

这不是问题，但这也是一个严重的错误。

【解决方案3】：

我刚刚发现我的错误。除了 jquery 路径错误之外，导航栏还在后台。我在底部的引导行中的列覆盖了导航栏。我用

设置了导航栏的样式

navbar {
    z-index: 50;
}

【讨论】：