1

Já vi várias postagens, todas com várias respostas, mas não consigo colocar meu dropdown para funcionar no menu. Ele simplesmente não abre. Será que preciso instalar algo a mais?

Meu código é esse:

        <nav class="navbar navbar-default">
          <div class="container-fluid">
            <div class="collapse navbar-collapse">
              <ul class="nav navbar-nav">
                <li class="dropdown">
                  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
                  <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">Page 1-1</a></li>
                    <li><a href="#">Page 1-2</a></li>
                    <li><a href="#">Page 1-3</a></li>
                  </ul>
              </li>         
              </ul>
            </div>
          </div>
        </nav>

Estou usando o typescript.

1 Resposta 1

0

Testei aqui e esta funcionando perfeitamente, verifique se os arquivos do bootstrap estão sendo incluídos corretamente no head do seu código.

segue o exemplo:

<html>
<head>
    <title>teste</title>

    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body>

    <nav class="navbar navbar-default">
          <div class="container-fluid">
            <div class="collapse navbar-collapse">
              <ul class="nav navbar-nav">
                <li class="dropdown">
                  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
                  <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">Page 1-1</a></li>
                    <li><a href="#">Page 1-2</a></li>
                    <li><a href="#">Page 1-3</a></li>
                  </ul>
              </li>         
              </ul>
            </div>
          </div>
        </nav>

    </body>

</html>        
7
  • Boa tarde Daniel, continua não funcionando. Estou achando que deve estar faltando algo. Suspeito de alguma configuração que eu não tenha feito, afinal, sou bem iniciante no assunto. 12/11/2017 às 19:39
  • Boa tarde, faça o seguinte copie este código inteiro e cole no seu editor, salve como teste.html e abra-o no seu navegador. Caso funcione verifique os arquivos do bootstrap que você incluiu no seu projeto, eles podem ser incluidos via CDN que é a forma que eu lhe passei acima ou você pode baixar os arquivos e inclui-los manualmente nas pastas do seu projeto. Aqui tem um link de como você pode inclui-los corretamente: w3schools.com/bootstrap/bootstrap_get_started.asp Aqui um link com exemplos de dropdowns e navbars: w3schools.com/bootstrap/bootstrap_navbar.asp 12/11/2017 às 19:54
  • Daniel, criei a página teste.html e funcionou. Eu acho que meu problema é que estou usando o ng server em ambiente de desenvolvimento. Por que digo isso? Fiz a alteração que você posou, salvei e o servidor recompilou o arquivo e atualizou a página com o menu, porém, "lá" no localhost/4200 ele não funciona. Será que falta alguma coisa no meu ambiente de desenvolvimento? 12/11/2017 às 20:03
  • Provavelmente, tente verificar nas pastas do seu projeto se está tudo ok com os links, se não os inclua ou os corrija. Se mesmo assim não funcionar tente baixar os arquivos do bootstrap e coloca-los dentro do repositório do seu projeto, então os inclua diretamente pelo nome dos arquivos. 12/11/2017 às 20:14
  • Daniel, esse é o problema. Não sei ver ainda se está tudo OK e quais arquivos colocar dentro do repositório e em qual repositório. Mas sua dica valeu muito. Já vou avançar para outro nível do meu problema. Obrigado pela ajuda. 12/11/2017 às 20:32

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .