Fórum Navbar do Bootstrap não expande quando redimensionado #465659

03/01/2014

0

Front-end

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ê

Responder

Post mais votado

03/01/2014

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

Joel Rodrigues

Joel Rodrigues
Responder

Gostei + 1

Mais Posts

03/01/2014

Carlos Andriê

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>
Responder

Gostei + 1

03/01/2014

Joel Rodrigues

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

Gostei + 1

03/01/2014

Carlos Andriê

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.
Responder

Gostei + 1

03/01/2014

Joel Rodrigues

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.
Responder

Gostei + 1

03/01/2014

Carlos Andriê

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

Gostei + 1

03/01/2014

Joel Rodrigues

Beleza, amigo.
Fico feliz por ter ajudado.
Estou concluindo o tópico.
Responder

Gostei + 1

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar