【发布时间】: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>
【问题讨论】: