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

Question

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

这里是 link 网站：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 Contents Missing On Mobile

html

css

jquery

navbar

twitter-bootstrap