Navbar无法在触摸屏移动设备上进行扩展

时间:2014-04-26 11:05:12

标签: testing mobile navbar

我已经按照大量教程创建了一个带有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>

 

1 个答案:

答案 0 :(得分:0)

您使用的是AngularJS吗?

“使用angular-ui bootstrap的响应式下拉导航栏(以正确的角度方式完成)” https://stackoverflow.com/a/19316266