Question

我已经阅读了类似的问题，但这些解决方案似乎并没有解决我的问题。我的导航栏在我的笔记本电脑上的不同浏览器中完美运行，但在我的iPhone上则不行。背景颜色和边框显示，但没有链接。

以下是该网站的链接：www.salesianacademy.com

这是我的HTML代码：

<!-- main navigation -->
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div id="menu">
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="pull-left"><a class="home" href="#">SALESIAN ACADEMY</a></li>
                    <li><a href="#about-us">About Us</a></li>
                    <li><a href="#services">Services</a></li>
                    <li><a href="#the-academy">The Academy</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li class="pull-right"><a href="#contact-us">Contact Us</a></li>
                </ul>
            </div>
        </div>
    </div>
</nav>

这是我的CSS代码：

    /* NAVIGATION MENU */

.navbar-default {
    border: 2px solid #a1a1a1;
    background-color: #ebebeb;
}

感谢您的帮助。经过几个小时的谷歌搜索后，我经常可以自己偶然发现答案......但我无法想出这一点。

Answer 1

看起来你错过了导航切换的代码：

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>

请参阅the docs

没有它，没有什么可以在移动设备上切换链接 - 基本上只留下一个空的导航栏

Navbar内容在移动设备上丢失

1 个答案: