Bootstrap nav-link類在Chrome中不起作用，但在Firefox中起作用，導航到相應部分

Question

我對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

也許有人遇到過同樣的問題？ 有辦法解決嗎？

Answer 1

您的代碼沒有錯誤。 但是我猜您在調用引導所需的源文件時出錯。

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

我希望這有幫助。

Answer 2

我做了一些引導學習和調試，發現了我的問題，對此我感到非常高興。 最后，我使菜單可行。

問題與此最高標簽有關

<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標簽中的這段代碼試圖做什么。 干杯

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