Twitter-Bootstrap responsive navbar dropdown sub-links are unclickable on tablet

Question

I am having trouble getting a link that is in a dropdown menu in the responsive navbar to click while using a tablet. This works fine in a desktop browser, but on a tablet when you click the link the drop down closes and nothing happens. I will post the code I have below, but you can also see it in this jsfiddle http://jsfiddle.net/Tapf9/ . I am using bootstrap v2.3.2 unminified version in my application.

<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 -->

What am I missing here?

Answer 1

Just add "collapse" to <div class="nav-collapse">.

It should work ;-)

<div class="nav-collapse collapse">

Answer 2

From what I can tell this issue is not present in all tablets. It works on an ipad, but not my panasonic toughpad fz-a1. I found that the tablet was registering the link click event to encompass the entire navbar causing it to reload. I upgraded to bootstrap 3 and modified my applications class selectors to match and that seems to have done the trick. now it is functioning.