Hello, I have a problem with HTML bootstrap, my dropdown does not work on mobile phones. It will be that someone can help me.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="js/jquery-1.7.1.min.js"><\/script>')
</script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">
<link rel="stylesheet" href="css/estilo.css">
<div class="carousel-caption">
<h4><a id="carousel" href=" ">Testando o carrocel </h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis inventore nulla maiores dicta odio quisquam consequuntur</p>
</a>
</div>
</div>
<div class="item">
<img src="img/teste05.jpg" class="imagem">
<div class="carousel-caption">
<h4>Testando </h4>
<p>Veja noticias sobre a Marcha para Jesus</p>
</div>
</div>
<div class="item"><img src="img/teste03.jpg" class="imagem"></div>
</div>
<!-- Navegador do carousel -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
<!-- Noticias com Imagens com tamanho de 300 X 200-->
<section>
<div class="row-fluid">
<ul class="thumbnails">
<li class="offset1 span3">
<div class="thumbnail">
<img src="img/teste03.jpg">
<h3>Marcha a todo Vapor!</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam accusantium vitae aut cumque iusto est... </p>
</div>
</li>
<li class="span4">
<div class="thumbnail">
<img src="img/teste02.jpg" alt="">
<h3>Rótulo para a miniatura</h3>
<p>Texto do thumbnail...</p>
</div>
</li>
<li class="span3">
<div class="thumbnail">
<img src="img/teste04.jpg" alt="">
<h3>Rótulo para a miniatura</h3>
<p>Texto do thumbnail...</p>
</div>
</li>
</ul>
</div>
</section>
<script type="text/javascript">
$('.carousel').carousel({
interval: 5000
}
</script>
<?php
include "rodape.php";
?>
<script type="text/javascript">
$(function(){
$(".dropdown-toggle").click(function(){
$(this).dropdown('toggle');
});
});
</script>
topo.php
<header>
<div class="row Logo">
<div class="span12">
<img src="img/logo.jpg" id="logo" />
<!-- <span class="pull-right"><h4>f t</h4></span> -->
</div>
</div>
<nav class="navbar">
<div class="navbar-inner">
<div class="container">
<button 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>
</button>
<a href="" class="brand pull-right">IPI Alterosa</a>
<div class="nav-collapse collapse">
<ul class="nav">
<!-- -->
<li><a href="index.php">Home</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" id="dLabel" role="button">
Institucional
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a href="historia.php">História</a></li>
<li><a href="">Quem Somos</a></li>
<li><a href="">Endereços</a></li>
</ul>
</li>
<li><a href="historia.php">Noticias</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Ministérios
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="">Missão</a></li>
<li><a href="">Visitação</a></li>
<li><a href="">Louvor</a></li>
</ul>
</li>
<li><a href="localizacao.php">Onde estamos</a></li>
<li>
<a href="http://www.ipib.org/o-estandarte-1/o-estandarte-online" target="_blank">
Estandarte </a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Contato
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="pedidos.php">Pedidos de oração</a></li>
<li><a href="">Telefones</a></li>
<li><a href="">Fale Conosco</a></li>
</ul>
</li>
</ul>
<div class="Pesquisa">
<form class="form-search">
<div class="input-append">
<input type="text" class="span2 search-query">
<button type="submit" class="btn btn-inverse"><i class="icon-search icon-white"></i></button>
</div>
</form>
</div>
</div>
</div>
</div>
</nav>
</header>