Bootstrap 4 导航栏无法在移动视图上工作

Question

我的 Chrome 开发工具的移动视图遇到问题。 我在朋友的手机上看到了这个问题，但我的手机工作正常......

我有一个带有下拉菜单的 Bootstrap 4 导航栏，并且下拉菜单不会在 Chrome 开发工具移动视图上展开。

网站是https://www.uvm.edu/femc/

这是代码：

<nav id="toprightnav" class="navbar navbar-light navbar-expand-md" role="navigation">
    <button type="button" class="navbar-toggler ml-auto" data-toggle="collapse" data-target="#navbar-collapse"> 
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse justify-content-end ml-auto" id="navbar-collapse">
        <ul class="nav navbar-nav align-items-end ml-auto d-lg-flex">
            <li class="nav-item h-100 dropdown">
                <a class="nav-link" role="button" aria-haspopup="true" aria-expanded="false" href="https://www.uvm.edu/femc/CI4/data" class="headernavli nav-link" >Data</a>
                <div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
                    <a class="nav-link no-border" href="https://www.uvm.edu/femc/CI4/data/index#contribute">Contribute Data</a>
                    <a class="nav-link no-border" href="https://www.uvm.edu/femc/CI4/data">Find Data</a>
                    <a class="nav-link no-border" href="https://www.uvm.edu/femc/CI4/products/collections">Collections</a>
                    <a class="nav-link no-border" href="https://www.uvm.edu/femc/CI4/data/live">Live Meteorological Data</a>
                    <a class="nav-link no-border" href="https://www.uvm.edu/femc/CI4/data_rescue">Data Rescue</a>
                    <a class="nav-link no-border" href="https://www.uvm.edu/femc/CI4/data/resources">Additional Data Resources</a>
                    <a class="nav-link no-border" href="https://www.uvm.edu/femc/CI4/data/user_guides">User Guides</a>
                </div>
            </li>
            <li class="nav-item no-dropdown h-100">
                <a role="button" aria-haspopup="false" aria-expanded="false" href="https://www.uvm.edu/femc/CI4/monitoring" class="headernavli nav-link no-border" >Monitoring</a>
                <div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink"></div>
            </li>
            <li class="nav-item h-100 dropdown">
                <a class="nav-link" role="button" aria-haspopup="true" aria-expanded="false" href="https://www.uvm.edu/femc/CI4/products/tools_projects" class="headernavli nav-link" >Tools & Products</a>
                <div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
                    <a class="nav-link no-border" href="https://www.uvm.edu/femc/CI4/products/tools_projects">Tools & Projects</a>
                    <a class="nav-link no-border" href="https://www.uvm.edu/femc/CI4/products/reports">Publications</a>
                </div>
            </li>
            <li class="nav-item no-dropdown h-100">
                <a role="button" aria-haspopup="false" aria-expanded="false" href="https://www.uvm.edu/femc/CI4/services" class="headernavli nav-link no-border" >Services</a>
                <div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink"></div>
            </li>
            <li class="nav-item h-100 dropdown">
                <a class="nav-link" role="button" aria-haspopup="true" aria-expanded="false" href="https://www.uvm.edu/femc/CI4/cooperative" class="headernavli nav-link" >Collaborate</a>
                <div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
                    <a class="nav-link no-border" href="https://www.uvm.edu/femc/CI4/cooperative/conference">Annual Meeting</a>
                    <a class="nav-link no-border" href="https://www.uvm.edu/femc/CI4/emf/rfp">Ecosystem Monitoring Fund</a>
                    <a class="nav-link no-border" href="https://www.uvm.edu/femc/CI4/cooperative/join">Join a project or state advisory committee</a>
                </div>
            </li>
            <li class="nav-item h-100 dropdown">
                <a class="nav-link" role="button" aria-haspopup="true" aria-expanded="false" href="https://www.uvm.edu/femc/CI4/about" class="headernavli nav-link" >About FEMC</a>
                <div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
                    <a class="nav-link no-border" href="https://www.uvm.edu/femc/CI4/about">Overview</a>
                    <a class="nav-link no-border" href="https://www.uvm.edu/femc/CI4/about/staff">Staff</a>
                    <a class="nav-link no-border" href="https://www.uvm.edu/femc/CI4/about/strategic_plan">Strategic Plan</a>
                    <a class="nav-link no-border" href="https://www.uvm.edu/femc/CI4/about/deij_initiatives">Our DEIJ Committment</a>
                    <a class="nav-link no-border" href="https://www.uvm.edu/femc/CI4/about/work_with_us">Job Opportunities</a>
                    <a class="nav-link no-border" href="https://www.uvm.edu/femc/CI4/about/contact">Contact</a>
                </div>
            </li>                        
        </ul>
    </div>
</nav>

我搜索了 stackoverflow，似乎有什么东西阻止了链接？ 但我查看了开发工具并没有看到任何 div 阻塞。 我不知道还能尝试什么...

Answer 1

我看到它们在扩展，但是您在 href 中有一个链接，请使用 # 代替，否则您会被重定向。