Navbar do Bootstrap não expande quando redimensionado

Front-end

03/01/2014

Olá a todos.
Estou tentando usar o componente navbar do Booststrap, já montei a estrutura de acordo com o exemplo e com o browser maximizado está funcionando. Quando eu redimensiono o browser, para simular uma resolução menor, ele reduz a navbar e mostra aquele menu no canto, para expandir, no estilo mobile, mas quando clico, nada ocorre. Alguém sabe se existe algum procedimento diferente pra fazer funcionar?
Valeu.
Carlos Andriê

Carlos Andriê

Curtidas 1

Melhor post

Joel Rodrigues

Joel Rodrigues

03/01/2014

Fala, Carlos.
Poderia postar seu código, por favor, para darmos uma olhada?
GOSTEI 1

Mais Respostas

Carlos Andriê

Carlos Andriê

03/01/2014

Opa, obrigado pela atenção. Minha navbar é bem simples, peguei de um exemplo do site do Bootstrap e até removi algumas coisas pra ficar mais simples ainda:

    <nav class="navbar navbar-default" role="navigation">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <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="#">Brand</a>
      </div>

      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </nav>
GOSTEI 1
Joel Rodrigues

Joel Rodrigues

03/01/2014

Aparentemente aí está tudo certo, testei aqui e funcionou. Você está referenciando os arquivos necessários (CSS e JS)?
GOSTEI 1
Carlos Andriê

Carlos Andriê

03/01/2014

Aqui está assim:
<head>
  <title>Bootstrap 101 Template</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="dist/js/bootstrap.min.js"></script>
</head>

Referenciei o CSS e o JS do Bootstrap e já conferi que o diretório está correto. Esse viewport eu peguei do exemplo no site.
GOSTEI 1
Joel Rodrigues

Joel Rodrigues

03/01/2014

Ah, vejo que faltou referenciar a jQuery, que é usada pelo Bootstrap. Antes do script do Bootstrap, adicione a seguinte linha: 
<script src="https://code.jquery.com/jquery.js"></script>
ou baixe a jQuery, salve no mesmo diretório do JS do Bootstrap e referencie o arquivo baixado, mas sempre antes do script do Bootstrap.
GOSTEI 1
Carlos Andriê

Carlos Andriê

03/01/2014

Valeu mesmo, agora deu certo. Aproveitei e baixei a jQuery para trabalhar com tudo local.
Obrigado pela ajuda.
GOSTEI 1
Joel Rodrigues

Joel Rodrigues

03/01/2014

Beleza, amigo.
Fico feliz por ter ajudado.
Estou concluindo o tópico.
GOSTEI 1
POSTAR