Bootstrap navbar will not toggle

前端 未结 3 1986
春和景丽
春和景丽 2021-01-28 17:21

I am rather new to using Bootstrap, and would love for one of you pros out there to show me where I am making my mistake.

What I am trying to accomplish: I am working o

相关标签:
3条回答
  • 2021-01-28 18:00

    You might be missing the javascript component of bootstrap. It is required for the menu foldout to work. Or, an exception might have halted Javascript. You can check that in your browsers debugging console.

    0 讨论(0)
  • 2021-01-28 18:07

    First make sure you have included bootstrap.js right after jquery script tag.Then check your navbar markup.for example:

    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="path/to/bootstrap.js" type="text/javascript"></script><!--required for navbar toggle--> 
    

    And

    <div class="navbar navbar-inverse navbar-static-top navbar-topic">
                <div class="container">
                <div class="navbar-header"><!--navbar start-->
                    <a  href="#"  class="navbar-brand"><!--Logo -->
                        your site
                    </a>
                    <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
                        <span class="icon-bar"></span><!--4 icon-bar spans create the dropdown menu-->
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
    
                    </button>
                </div>
                    <div class="collapse navbar-collapse navHeaderCollapse">
                        <ul class="nav navbar-nav navbar-right">
    
                            <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">More things <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="/html/webdesign/html.php">Html</a></li>
                                <li><a href="">Link</a></li>
                                <li><a href="">Link 2</a></li>
                                <li><a href="">Link 3</a></li>
    
                            </ul>
    
    
                            </li>
                            <li><a href="">Links</a></li>
                            <li><a href="">Contact</a></li>
                        </ul>
                    </div>
    
    0 讨论(0)
  • 2021-01-28 18:23

    You need to add the CDN's correctly else collapsing and toggling won't work

    Order to be followed for adding Bootstrap 4 CDN is:

    1. jQuery
    2. Popper.js
    3. Bootstrap JS

    and a sample template that is to be followed according to bootstrap 4 specifications is :

    <!DOCTYPE html>
    
    <html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Kulkarni Book-Stall</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    </head>
    <body>
         <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
            
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
                    <a class="navbar-brand" href="#">Navbar</a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
                      <span class="navbar-toggler-icon"></span>
                    </button>
                  
                    <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
                      <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                        <li class="nav-item active">
                          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href="#">Link</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link disabled" href="#">Disabled</a>
                        </li>
                      </ul>
                      <form class="form-inline my-2 my-lg-0">
                        <input class="form-control mr-sm-2" type="search" placeholder="Search">
                        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
                      </form>
                    </div>
         </nav>
    </body>
    </html>

    0 讨论(0)
提交回复
热议问题