2
hi guys I’m having a super HTML bootstrap problem, my dropdown doesn’t work on mobile phones. will anyone 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>
top.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>
On your mobile device, in the browser options, you have the option to
Utilizar Javascript(or something like that) activated?– Chun
have yes, and already activated, already test on some mobile phones and nothing, in the computer browser it is right, but in mobile devices not...
– pedro
Let me be more specific in my question. The dropdown even works, but I have a sub menu inside the dropdown and it doesn’t want to work...
– pedro
Pedro all cell phones that tested this failed? Could you inform the operating system version of the tested cell phones and browsers? - I noticed that Voce is using
bootstrap-responsive.css, Does this mean that you are using bootstrap2? Because up to where I know the bootstrap3 ja and "totally" responsive.– Guilherme Nascimento
I am using the bootstrap 2 yes, as I am new in the subject I am learning in this version, you think the problem may be the version:???
– pedro
When I click on the dropdown on the phone it opens the option, then I click on the sub menu of one of the options of the dropdwn then it opens and closes. Do not let the user click on top to open...
– pedro
Someone can help me?
– pedro