【问题标题】:Navbar doesn't expand on touch screen mobile device导航栏不会在触摸屏移动设备上展开
【发布时间】:2014-04-26 11:05:11
【问题描述】:

我已按照大量教程使用 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>

【问题讨论】:

    标签: testing mobile navbar


    【解决方案1】:

    你在使用 AngularJS 吗?

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2020-09-12
      • 1970-01-01
      • 2018-08-20
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-05-24
      • 1970-01-01
      相关资源
      最近更新 更多