Navbar切换但在移动设备上进行本地测试时无法正常工作

时间:2014-04-13 22:14:36

标签: testing mobile hyperlink twitter-bootstrap-3 href

我已经按照大量教程创建了一个带有Bootstrap 3的响应式网站。但是,当我在移动设备上本地测试我的网站时,Href链接似乎无法正常工作。导航栏切换但触摸时不会扩展导航链接以及模态链接。唯一可行的链接是指向facebook的链接。我的问题是网站是否需要在服务器上运行才能工作或者我在这里做错了什么?

让我们从我的切换导航栏开始。适用于桌面,但在移动设备触摸屏上本地测试时,它会切换,但在触摸切换图标时不会扩展。我通过复制它在我的手机上对此进行了测试,但是切换元素没有展开菜单。任何帮助,将不胜感激。

<div class="jumbotron" id="jumbotron-nav">
    <div class="container">
        <nav class = "navbar navbar-default navbar-fixed-top" role="navigation">
            <div class="container-fluid">

                <div class="navbar-header">
                    <button type= "button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarpage">
                        <span class="sr-only">Toggle Navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>  
                        <span class="icon-bar"></span>
                    </button>

                    <a class="navbar-brand" href="#">Archways</a>

                </div>

                <div class = "collapse navbar-collapse" id="navbarpage">

                    <ul class = "nav navbar-nav navbar-right">

                        <li><a href = "#Aboutus" data-toggle="collapse" data-target="#navbarpage">About us</a></li>
                        <li><a href = "#Roomhire" data-toggle="collapse" data-target="#navbarpage">Room Hire</a></li>
                        <li><a href = "#Treatment" data-toggle="collapse" data-target="#navbarpage">Treatment</a></li>  
                        <li><a href = "#Meettheteam" data-toggle="collapse" data-target="#navbarpage">Meet the team</a></li>
                        <li><a href = "#" data-toggle="modal" data-target="#contactus">Contact us</a></li>
                        <li><a href = "#Findus" data-toggle="collapse" data-target="#navbarpage">Find us</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
</div>

0 个答案:

没有答案