jquery - 移动设备上缺少导航栏内容

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

如果没有它，就没有什么可以在移动设备上切换链接——基本上给你留下一个空的导航栏