[英]Bootstrap nav-link class is not working in Chrome, but works in Firefox, navigates to corresponding section
我对Bootstrap并不熟悉,我正在尝试自定义一页Web模板。 在http://lidia.gq上有示例。 我的问题是它具有的菜单项在Chrome中无法使用。 因此,当我单击任何菜单项时,它应该从页面导航到相应部分时,它什么也不做。 我正在使用68.0.3440.106版本。 但是在其他浏览器(如Firefox,Microsoft Edge,Internet Explorer和移动Chrome)上,我没有遇到此问题,所有菜单项都可以成功运行。
那么,为什么它不能在Chrome Windows PC上运行?
HTML
<div class="navbar-desktop">
<!--Navbar Brand-->
<a class="navbar-brand" href="#home"><img src="img/logo.png" alt="" /></a>
<!--Links-->
<ul class="nav navbar-nav pull-right hidden-md-down text-uppercase">
<li class="nav-item">
<a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#service">Service</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#team">Team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#newsletter">Faq</a>
</li>
<li class="nav-item">
<a class="nav-link" target="_blank" href="#!"><i class="fa fa-search fa-lg"></i></a>
</li>
</ul>
</div>
它使用Bootstrap v4.0.0-alpha.2
http://lidia.gq/css/bootstrap.min.css
也许有人遇到过同样的问题? 有办法解决吗?
您的代码没有错误。 但是我猜您在调用引导所需的源文件时出错。
<head>
标记内所需的文件:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
</body>
标记之前需要的文件:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
您的HTML代码应如下所示。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="navbar-desktop">
<!--Navbar Brand-->
<a class="navbar-brand" href="#home"><img src="img/logo.png" alt="" /></a>
<!--Links-->
<ul class="nav navbar-nav pull-right hidden-md-down text-uppercase">
<li class="nav-item">
<a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#service">Service</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#team">Team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#newsletter">Faq</a>
</li>
<li class="nav-item">
<a class="nav-link" target="_blank" href="#!"><i class="fa fa-search fa-lg"></i></a>
</li>
</ul>
</div>
我希望这有帮助。
我做了一些引导学习和调试,发现了我的问题,对此我感到非常高兴。 最后,我使菜单可行。
问题与此最高标签有关
<div class="navbar-desktop">
我提到,我的身体标签中也有:
<body data-spy="scroll" data-target=".navbar-desktop">
和我的HTML正在使用main.js
<script type="text/javascript" src="js/main.js"></script>
哪个调用jQuery
// localScroll js
jQuery(".navbar-desktop").localScroll();
如果我从main.js
注释(或重命名)最后一行,则菜单将起作用。 基本上,似乎来自Java脚本的此代码使我的代码混乱,而不是从bootstrap nav调用.navbar-desktop
,而是使用来自Java脚本的代码。
不确定body标签中的这段代码试图做什么。 干杯
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.