移动Bootstrap上的导航栏下拉菜单

Question

使用移动设备（触摸）时，带有引导程序的导航栏出现问题。

如果我使用的是计算机，则导航​​栏工作正常，但是如果是触摸设备，则尝试选择选项时，下拉菜单将隐藏。

<div class="navbar navbar-inverse">
    <div class="navbar-inner">
        <div class="container">
                        <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
                        <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>

                        <!-- Be sure to leave the brand out there if you want it shown -->
                        <a class="brand" href="/webga/index/index">Inicio</a>

                        <!-- Everything you want hidden at 940px or less, place within here -->
                        <div class="nav-collapse">
                            <ul class="nav">
                                <li class="dropdown"><a href="#" class="dropdown-toggle"
                                    data-toggle="dropdown" data-target=".nav-collapse">
                                        Cadastros <b class="caret"></b>
                                </a>
                                    <ul class="dropdown-menu">
                                        <li><a href="<c:url value="/empresa/novaEmpresa"/>">Empresa</a></li>
                                        <li><a
                                            href="<c:url value="/empreendedor/novoEmpreendedor"/>">Empreendedor</a></li>
                                        <li><a
                                            href="<c:url value="/empreendimento/novoEmpreendimento"/>">Empreendimento</a></li>
                                        <li><a href="<c:url value="/atividades/novaAtividade"/>">Atividades</a></li>
                                        <li><a
                                            href="<c:url value="/subatividade/novaSubAtividade"/>">Sub-Atividades</a></li>
                                        <li><a
                                            href="<c:url value="/responsavel/novoResponsavel"/>">Responsavel
                                                Técnico</a></li>
                                        <li><a
                                            href="<c:url value="/documentacao/novaDocumentacao"/>">Documentações</a></li>
                                    </ul></li>
                            </ul>
                            <ul class="nav">
                                <li class="dropdown"><a href="#" class="dropdown-toggle"
                                    data-toggle="dropdown"> Consultas <b class="caret"></b></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="<c:url value="/processos/pesquisa"/>">Processos</a></li>
                                        <li><a href="<c:url value="/subatividade/lista"/>">SubAtividades</a></li>
                                        <li><a href="<c:url value="#"/>">Legislações</a></li>
                                        <li><a href="<c:url value="#"/>">Documentos</a></li>
                                    </ul></li>
                            </ul>
                            <ul class="nav">
                                <li class="dropdown"><a href="#" class="dropdown-toggle"
                                    data-toggle="dropdown"> Solicitações <b class="caret"></b></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="<c:url value="#"/>">Licensa
                                                Ambiental/Florestal</a></li>
                                        <li><a href="<c:url value="#"/>">Declaração de
                                                isenção de licensa</a></li>
                                    </ul></li>
                            </ul>
                            <ul class="nav">
                                <li class="dropdown"><a href="#" class="dropdown-toggle"
                                    data-toggle="dropdown"> Relátorios <b class="caret"></b></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="<c:url value="#"/>">Lista de
                                                Atividades/Sub-Atividades</a></li>
                                        <li><a href="<c:url value="#"/>">Solicitações por
                                                Empreendedor</a></li>
                                        <li><a href="<c:url value="#"/>">Solicitações por
                                                Empreendimento</a></li>
                                        <li><a href="<c:url value="#"/>">Solicitações por
                                                Atividade</a></li>
                                        <li><a href="<c:url value="#"/>">Estatística por
                                                Atividade</a></li>
                                        <li><a href="<c:url value="#"/>">Relação dos
                                                Usuarios</a></li>
                                        <li><a href="<c:url value="#"/>">Relação de
                                                Empreendedores e seus Empreendimentos</a></li>
                                    </ul></li>
                            </ul>
                            <ul class="nav">
                                <li class="dropdown"><a href="#" class="dropdown-toggle"
                                    data-toggle="dropdown"> Ajuda <b class="caret"></b></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="<c:url value="#"/>">Informações</a></li>
                                        <li><a href="<c:url value="#"/>">Suporte</a></li>
                                    </ul></li>
                            </ul>
                            <ul class="nav">
                                <li class="dropdown"><a href="#" class="dropdown-toggle"
                                    data-toggle="dropdown"> Sistema <b class="caret"></b></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="<c:url value="/usuario/alterarSenha"/>">Alterar
                                                Senha</a></li>
                                    </ul></li>
                            </ul>
                            <ul class="nav pull-right">
                                <li class="pull-right"><a href="<c:url value="/logout"/>">Logout</a></li>
                            </ul>
                        </div>

                    </div>
                </div>
            </div>

任何帮助表示赞赏。 谢谢

Answer 1

您可能尚未更新到最新的Bootstrap，对吗？

我在此处写了一篇博客文章，其中包含针对此问题的临时修复程序： http : //forwebonly.com/fix-for-twitter-bootstrap-dropdown-on-ipad-and-iphone/

但是，当您更新到最新的Bootstrap（版本2.2.2或更高版本）时，此问题应已解决，因为您可以在其changelog中阅读。

以下是此版本中新增功能的摘要：

...

下拉菜单：为移动设备上的下拉菜单添加了临时修复程序，以防止它们过早关闭。