我的手机菜单/导航栏出现问题。我创建了一个“登录”按钮，使用由Bootstrap提供的collapse.js以登录形式下拉。我的div拉下来并完美地坍塌。但是，无论出于何种原因，只要您单击用户名或密码文本框字段，它就会自动折叠。知道为什么会这样吗？
以下是jsfiddle的链接，用于演示此问题：http://jsfiddle.net/65KdX/2/
以下是导航栏的代码部分：
<!-- Begin Navbar items -->
<div class = "collapse navbar-collapse" id = "mainNavbarInfo">
<ul class = "nav navbar-nav navbar-right">
<li class = "active"><a href = "#"><span class = "glyphicon glyphicon-home"></span> Home </a> </li>
<li><a href = "#"><span class = "glyphicon glyphicon-list-alt"></span> SLO Generator </a> </li>
<li><a href = "#"><span class = "glyphicon glyphicon-question-sign"></span> SLO Tutorial </a> </li>
<li><a href = "#"><span class = "glyphicon glyphicon-cloud-upload"></span> Sign Up </a></li>
<li data-toggle = "collapse" data-target = "#signInFormCollapseMobile" class = "visible-xs">
<a href = "#"><span class = "glyphicon glyphicon-share-alt"></span> Sign In<div class = "collapse signInFormCollapse" id = "signInFormCollapseMobile" style = "position: relative;"></a>
<form action="[YOUR ACTION]" method="post" accept-charset="UTF-8" id = "signInFormMobile">
<input id="user_username" style="margin-bottom: 15px; margin-top: 10px;" type="text" name="user[username]" size="30" placeholder = "Username"/>
<br><input id="user_password" style="margin-bottom: 15px;" type="password" name="user[password]" size="30" placeholder = "Password"/>
<br><input id="user_remember_me" style="float: left; margin-right: 10px;" type="checkbox" name="user[remember_me]" value="1" />
<label class="string optional" for="user_remember_me"> Remember me</label>
<input class="btn btn-primary" style="clear: left; width: 100%; height: 32px; font-size: 13px; margin-bottom: 10px;" type="submit" name="commit" value="Sign In" />
</form>
</div>
</li>
</ul>
</div>