这是我的menu.php，它根据用户个人资料构建Bootstrap菜单。 当我在手机上试用时，菜单下拉列表不会出现（应该在移动菜单的右侧）。 我找不到问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="ISO-8859-1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="cache-control" content="no-cache,no-store,must-revalidate" />
<meta http-equiv="expires" content="Sat, 26 Jul 1997 05:00:00 GMT" />
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" type="image/x-icon" href="../favicon.ico">
<title>Gestão de Contratos</title>
<!-- CSS ================================================== -->
<!-- Bootstrap Core CSS -->
<link href="../Bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="../Plugins/Bootstrap-table/dist/bootstrap-table.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="../Plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="../CSS/navbar-fixed-top.css" rel="stylesheet">
<link href="../CSS/docs.min.css" rel="stylesheet">
<link href="../Plugins/msg.css" rel="stylesheet" type="text/css" >
<style>
.navbar-brand { float: left; height: 50px; padding: 5px 15px; font-size: 18px; line-height: 20px; vertical-align: bottom; }
.bs-docs-nav .navbar-brand, .bs-docs-nav .navbar-nav>li>a { font-weight: 500; color: #525252; }
.modal.modal-70wide .modal-dialog { width: 70%; }
.modal-70wide .modal-body { overflow-y: auto; }
</style>
</head>
<body class="bs-docs-home">
<!-- Docs master nav -->
<header class="navbar navbar-fixed-top bs-docs-nav" id="top" role="banner">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="page_principal.php">
<img alt="Brand" width="auto" height="30" align="top" src="../Images/logovale.png">
</a>
</div>
<nav id="bs-navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Administrador <span class="caret"></span></a>
<ul class="dropdown-menu">
<li role="navigation" class="dropdown-header" >Informações Gerais:</li>
<li><a href="#" onclick="fazmenu('page_cadastro_fornecedor.php',0)">- Empresas e CNPJs</a></li>
<li><a href="#" onclick="fazmenu('page_cadastro_categoria.php',0)" >- Categorias</a></li>
<li><a href="#" onclick="fazmenu('page_cadastro_unidade.php',0)" >- Unidades Operacionais</a></li>
<li><a href="#" onclick="fazmenu('page_cadastro_centros.php',0)" >- Centros</a></li>
<li><a href="#" onclick="fazmenu('page_cadastro_municipio.php',0)" >- Municípios</a></li>
<li role="navigation" class="dropdown-header" >Cadastro de usuários:</li>
<li><a href="#" onclick="fazmenu('page_cadastro_usuario.php?v=0',0)">- Administradores</a></li>
<li><a href="#" onclick="fazmenu('page_cadastro_usuario.php?v=1',0)">- Gestores de Categorias</a></li>
</ul>
</li><li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Gestor Categoria<span class="caret"></span></a>
<ul class="dropdown-menu">
<li role="navigation" class="dropdown-header" >Informações Gerais:</li>
<li><a href="#" onclick="fazmenu('page_cadastro_isscateg.php',1)" >- ISS</a></li>
<li role="navigation" class="dropdown-header" >Dados Básicos Contrato:</li>
<li><a href="#" onclick="fazmenu('page_cadastro_funcao.php',1)" >- Funções</a></li>
<li><a href="#" onclick="fazmenu('page_cadastro_equipamento.php',1)">- Equipamentos</a></li>
<li><a href="#" onclick="fazmenu('page_cadastro_epi.php',1)" >- EPIs</a></li>
<li><a href="#" onclick="fazmenu('page_cadastro_exame.php',1)" >- Exames</a></li>
<li><a href="#" onclick="fazmenu('page_cadastro_treina.php',1)" >- Treinamentos</a></li>
<li><a href="#" onclick="fazmenu('page_cadastro_sindicato.php',1)" >- Sindicatos</a></li>
<li role="navigation" class="dropdown-header" >Gestão Contratos:</li>
<li><a href="#" onclick="fazmenu('page_cadastro_contrato.php',1)" >- Contratos e OCs</a></li>
<li><a href="#" onclick="fazmenu('page_cadastro_sindxempr.php',1)" >- Grupos de Preços</a></li>
<li role="navigation" class="dropdown-header" >Cadastro de usuários:</li>
<li><a href="#" onclick="fazmenu('page_cadastro_usuario.php?v=2',1)">x Usuários Gestão Geral</a></li> <!-- GGI e GGE -->
<li role="navigation" class="dropdown-header" >Relatórios:</li>
<li><a href="#" onclick="fazmenu('page_relmensal.php',1)" >x Relatório Mensal</a></li>
<li><a href="#" onclick="fazmenu('page_relevolcusto.php',1)" >x Evolução de Custos</a></li>
</ul>
</li><li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Gestão Contratante<span class="caret"></span></a>
<ul class="dropdown-menu"><li role="navigation" class="dropdown-header">Gestão Geral:</li> <!-- GGI -->
<li><a href="#">x Relatórios</a></li>
<li><a href="#" onclick="fazmenu('page_cadastro_usuario.php?v=3',1)">x Cadastro de Gestores e Fiscais</a></li>
<li><a href="#">x Medição</a></li><li role="navigation" class="dropdown-header">Gestão:</li> <!-- GI -->
<li><a href="#">x Postos (Mob/Desmob)</a></li>
<li><a href="#">x Emitir Notificação</a></li>
<li><a href="#">x Medição</a></li> <li role="navigation" class="dropdown-header">Fiscalização:</li> <!-- FI -->
<li><a href="#">x Medição</a></li>
<li><a href="#">x Histórico Medições</a></li>
<li><a href="#">x Posto Descoberto</a></li>
<li><a href="#">x Descontos</a></li>
</ul>
</li><li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Gestão Contratada<span class="caret"></span></a>
<ul class="dropdown-menu"><li role="navigation" class="dropdown-header">Gestão Geral:</li> <!-- GGE -->
<li><a href="#">x Relatórios</a></li>
<li><a href="#" onclick="fazmenu('page_cadastro_usuario.php?v=4',1)">x Cadastro de Gestores e Fiscais</a></li>
<li><a href="#">x Medição</a></li>
<li><a href="page_cadastro_MDO.php">- Custos de Mão de Obra</a></li><li role="navigation" class="dropdown-header">Gestão:</li> <!-- GE -->
<li><a href="#">x Postos (Mob/Desmob)</a></li>
<li><a href="#">x Notificações</a></li>
<li><a href="#">x Medição</a></li> <li role="navigation" class="dropdown-header">Fiscalização:</li> <!-- FE -->
<li><a href="#">x Medição</a></li>
<li><a href="#">x Histórico Medições</a></li>
<li><a href="#">x Posto Descoberto</a></li>
<li><a href="#">x Descontos</a></li>
</ul>
</li><li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Meu Cadastro<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#" onclick="fazmenu('page_meucadastro.php',0)" >- Alterar meu Cadastro</a></li>
<li><a href="#" onclick="fazmenu('page_altera_senha.php',0)" >- Alterar minha Senha</a></li>
</ul>
</li><li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="glyphicon glyphicon-eye-open"></i> Indique a Categoria<span class="caret"></span></a>
<ul class="dropdown-menu"><li><a href="#" onclick="mudacat(5)">CFTV Operações e Peças Aternativas para Segurança</a></li><li><a href="#" onclick="mudacat(2)">Portaria e Serviços</a></li><li><a href="#" onclick="mudacat(3)">Segurança Eletrônica</a></li><li><a href="#" onclick="mudacat(1)">Vigilância</a></li> </ul>
</li>
</ul> <!-- FIM MENU nav navbar-nav -->
<!-- BOTÃO DE SAIR -->
<ul class="nav navbar-nav navbar-right">
<li><a href="script_logout.php"><i class="glyphicon glyphicon-off"></i> Sair</a></li>
</ul>
</nav>
</div> <!-- container -->
</header>
<!-- form para executar script de página do menu -->
<div id="idchama" style="display:none">
<FORM id="fchama" NAME="fchama" ACTION="xxx.php" target="_self" METHOD="POST">
<input type="text" id="idCateg" name="idCateg" value="" >
<input type="submit" id="btchama">
</FORM>
</div>
<!-- SCRIPTS Placed at the end of the document so the pages load faster
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> -->
<script src="../JS/jquery-1.11.3.min.js"></script>
<script src="../Bootstrap/js/bootstrap.min.js"></script>
<script src="../Plugins/Bootstrap-table/dist/bootstrap-table.min.js"></script>
<script src="../JS/bootstrap-table-mobile.js"></script>
<script src="../JS/bootstrap-table-export.js"></script>
<script src="../JS/tableExport.js"></script>
<script src="../JS/bootstrap-table-resizable.js"></script>
<script src="../JS/colResizable-1.5.source.js"></script>
<script src="../JS/Funcoes.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../JS/ie10-viewport-bug-workaround.js"></script>
<!-- dhtmlxGrid -->
<link rel="stylesheet" href="../JS/dhtmlxGrid/codebase/dhtmlxgrid.css" type="text/css" />
<script language="javascript" src="../JS/dhtmlxGrid/codebase/dhtmlxcommon.js"></script>
<script language="javascript" src="../JS/dhtmlxGrid/codebase/dhtmlxgrid.js"></script>
<script language="javascript" src="../JS/dhtmlxGrid/codebase/dhtmlxgridcell.js"></script>
<style type="text/css">
.csslingradeimpar{ background-color:#E6E6FA; }
.csslingradepar { background-color:#F0F8FF; }
.csslinhover { background-color:#FFCCCC; }
</style>
<script src="../Plugins/msg.js"></script>
<script> <!-- funções genéricas para todos -->
document.getElementById('idCateg').value= '0';
function mudacat(c)
{
window.document.fchama.target= "_self"; // para abrir pagina na mesma tab
window.document.fchama.action= 'page_principal.php'; // script a carregar
document.getElementById('idCateg').value= c; // passa por post a categoria nova
window.document.fchama.btchama.click(); // carrega page_principal.php reabre menu puro
}
$(".modal-70wide").on("show.bs.modal", function() {
var height = $(window).height() - 200;
$(this).find(".modal-body").css("max-height", height);
});
// ==============================
function fazmenu(script,op)
// ==============================
{
if( (op == 1) && (document.getElementById('idCateg').value == '0') )
{
da_mensagem('Indique uma Categoria','a');
xTimeout= setTimeout(deuTimeout,1500);
return false;
}
window.document.fchama.target= "_self";
window.document.fchama.action= script;
// document.getElementById('idCateg').value= categ;
window.document.fchama.btchama.click();
}
var posretorno; // posição inicial do proximo "registro" a ser extraido da string retornada
var arraycampos = new Array(); // campos referentes a um "registro" extraido da string retornada
</script>
<!-- esta terminação tem que ser feita em cada tela que inclui o script_menu.php
</body>
</html>
-->
<div class="container">
<div id="mensagem" class="ui-widget-content"> </div>
<div id="desabilita_msg" style="visibility:hidden" ></div>
</div> <!-- container vazio menu inicial -->
<script> // JAVASCRIPT DO MÓDULO DE UNIDADES
var xTimeout;
function deuTimeout()
{
clearTimeout(xTimeout);
document.getElementById("desabilita_msg").style.visibility="hidden";
document.getElementById("mensagem").style.visibility="hidden";
}
</body> <!-- aberto no script_menu.php -->
</html>
答案 0 :(得分：0)
您缺少以移动设备屏幕尺寸显示的菜单按钮的代码。你需要在navbar-header。
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-navbar" aria-expanded="false">
<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="page_principal.php">
<img alt="Brand" width="auto" height="30" align="top" src="../Images/logovale.png">
</a>
</div>