Dropdown menu shows no subitens

Asked

Viewed 71 times

1

I’ve seen several posts, all with multiple responses, but I can’t get my dropdown to work on the menu. It just doesn’t open. Do I need to install something else?

My code is this:

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

I’m using the typescript.

twitter-bootstrap

1 answer

0


I tested it here and it is working perfectly, make sure the bootstrap files are being included correctly in the head of your code.

follow the example:

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

  • Good afternoon Daniel, it’s still not working. I’m thinking there must be something missing. I suspect some configuration that I have not done, after all, I am quite beginner in the subject.

  • Good afternoon, do the following copy this entire code and paste it into your editor, save it as test.html and open it in your browser. If it works check the bootstrap files you included in your project, they can be included via CDN which is the way I passed them up to you or you can download the files and include them manually in your project folders. Here’s a link to how you can include them correctly: https://www.w3schools.com/bootstrap_bootstrap_started.asp Here’s a link with examples of dropdowns and navbars: https://www.w3schools.com/bootstrap/bootstrap_navbar.asp

  • Daniel, I created the test.html page and it worked. I think my problem is that I am using ng server in development environment. Why do I say that? I made the change you posed, saved and the server recompiled the file and updated the page with the menu, however, "there" in localhost/4200 it does not work. Is there something missing in my development environment?

  • Probably try checking your project folders to see if everything is okay with the links, if you don’t include them or correct them. If it still doesn’t work try to download the bootstrap files and place them inside your project’s repository, then include them directly by the name of the files.

  • Daniel, that’s the problem. I don’t know yet to see if everything is OK and which files to put inside the repository and in which repository. But your tip was worth a lot. I’m already moving on to another level of my problem. Thanks for the help.

  • The download is here: http://getbootstrap.com/docs/3.3/getting-started/#download . If you prefer you can install bootstrap 4 plus it is still in development. You could also install it via npm, since it works with a dev environment. To install it manually you have to go inside the folders of your project, paste the files you downloaded and call them inside the main file or only in the current file to test. There are several guides on how to do this over the internet, including the bootstrap website itself. If there is any further difficulty I am at your disposal.

  • I’ve already installed via npm. I think some reference is missing somewhere. Something I have to do more to work.

Show 2 more comments

Browser other questions tagged twitter-bootstrap

You are not signed in. Login or sign up in order to post.