Bootstrap nav-link类在Chrome中不起作用，但在Firefox中起作用，导航到相应部分

Question

I am not familiar with Bootstrap, and I am trying to customize a one-page web template. 我对Bootstrap并不熟悉，我正在尝试自定义一页Web模板。 Having the sample on http://lidia.gq . 在http://lidia.gq上有示例。 My problem is that the menu items that it has, are not workable in Chrome. 我的问题是它具有的菜单项在Chrome中无法使用。 So, when I click any menu item, it does nothing, when it should navigate to the corresponding section from the page. 因此，当我单击任何菜单项时，它应该从页面导航到相应部分时，它什么也不做。 I am using Version 68.0.3440.106. 我正在使用68.0.3440.106版本。 But on other browsers like Firefox, Microsoft Edge, Internet Explorer, and on mobile Chrome I do not encounter this problem, all menu items successfully work. 但是在其他浏览器（如Firefox，Microsoft Edge，Internet Explorer和移动Chrome）上，我没有遇到此问题，所有菜单项都可以成功运行。

So, why does it not work on Chrome Windows PC? 那么，为什么它不能在Chrome Windows PC上运行？

HTML 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>

It Uses Bootstrap v4.0.0-alpha.2 它使用Bootstrap v4.0.0-alpha.2

http://lidia.gq/css/bootstrap.min.css http://lidia.gq/css/bootstrap.min.css

Maybe someone encountered the same problem? 也许有人遇到过同样的问题？ Is there a way to fix it? 有办法解决吗？

Answer 1

There's no error with your code. 您的代码没有错误。 But I guess you have errors in calling the required source files for bootstrap. 但是我猜您在调用引导所需的源文件时出错。

Files needed inside <head> tag: <head>标记内所需的文件：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

Files needed before </body> tag: </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>

Your HTML code should look like this. 您的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>

I hope this helps. 我希望这有帮助。

Answer 2

I did a little bit of bootstrap learning and debugging, and I figured out what was my problem, and I very happy about it. 我做了一些引导学习和调试，发现了我的问题，对此我感到非常高兴。 Finally I made my menu workable. 最后，我使菜单可行。

The problem is related to this top tag 问题与此最高标签有关

<div class="navbar-desktop">

I mentioned, that I also have in my body tag: 我提到，我的身体标签中也有：

<body data-spy="scroll" data-target=".navbar-desktop">

and my html is using the main.js 和我的HTML正在使用main.js

<script type="text/javascript" src="js/main.js"></script>

which calls the jquery 哪个调用jQuery

// localScroll js
    jQuery(".navbar-desktop").localScroll();

If I comment that last line (or rename), from main.js , my menu works. 如果我从main.js注释（或重命名）最后一行，则菜单将起作用。 Basically, seems that this code from java script confuses my code, and instead off calling .navbar-desktop from bootstrap nav, it uses the one from java script. 基本上，似乎来自Java脚本的此代码使我的代码混乱，而不是从bootstrap nav调用.navbar-desktop ，而是使用来自Java脚本的代码。

Not sure though what this code from body tag tries to do. 不确定body标签中的这段代码试图做什么。 Cheers 干杯

Bootstrap nav-link类在Chrome中不起作用，但在Firefox中起作用，导航到相应部分

问题描述

2 个解决方案

解决方案1
0 2018-09-09 21:26:34

解决方案2
0 2018-12-01 13:09:15

Bootstrap nav-link类在Chrome中不起作用，但在Firefox中起作用，导航到相应部分

问题描述

2 个解决方案

解决方案1 0 2018-09-09 21:26:34

解决方案2 0 2018-12-01 13:09:15

解决方案1
0 2018-09-09 21:26:34

解决方案2
0 2018-12-01 13:09:15