平板电脑上的Twitter-Bootstrap响应式导航栏下拉子链接无法点击

时间:2013-08-29 19:26:01

标签: jquery html css twitter-bootstrap responsive-design

我无法在使用平板电脑时在响应式导航栏中的下拉菜单中获取链接。这在桌面浏览器中工作正常,但在单击链接时在平板电脑上下拉关闭,没有任何反应。我将发布下面的代码,但你也可以在这个jsfiddle http://jsfiddle.net/Tapf9/中看到它。我在我的应用程序中使用bootstrap v2.3.2 unminified version。

<div class="navbar navbar-fixed-top">
          <div class="navbar-inner">
            <div class="container-fluid">
              <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </a>
              <a class="brand" href="~/">Company x</a>
              <div class="nav-collapse">
                <ul class="nav">
                    <li class="navHome"><a href="~/"><i class="icon-home icon-white"></i> Home</a></li>                        
                    <li class="dropdown"><a class="navInst dropdown-toggle" data-toggle="dropdown">DropDown1<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="~/x/Create" >Create</a></li>
                            <li><a href="~/x">Search</a></li>
                        </ul>
                    </li>
                    <li class="dropdown "><a class="navServ dropdown-toggle" data-toggle="dropdown" href="~/ServiceTicket">DropDown2<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="~/y/Create">Create</a></li>
                            <li><a href="~/y">Search</a></li>
                        </ul>
                    </li>
                    <li class="dropdown "><a class="navPm dropdown-toggle" data-toggle="dropdown" href="~/PmTicket">DropDown3<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="~/z/Create">Create</a></li>
                            <li><a href="~/z">Search</a></li>
                        </ul>
                    </li>


                    <li id="logout"><a href="#">Logout</a></li>
                </ul>
              </div><!-- /.nav-collapse -->
            </div><!-- /.container -->
          </div><!-- /.navbar-inner -->
        </div><!-- /.navbar -->

我在这里缺少什么?

2 个答案:

答案 0 :(得分:0)

只需将“崩溃”添加到&lt; div class =“nav-collapse”&gt;。

work ;-)

<div class="nav-collapse collapse">

答案 1 :(得分:0)

据我所知,所有平板电脑都没有这个问题。它适用于ipad,但不适用于我的panasonic toughpad fz-a1。我发现平板电脑正在注册链接点击事件以包含导致其重新加载的整个导航栏。我升级到bootstrap 3并修改了我的应用程序类选择器以匹配,这似乎已经完成了。现在它正在发挥作用。