Bootstrap 4 navbar is not toggling

问题

Hie, I have been trying to expand my responsive navbar using the data toggler however its not working , looked at other related questions but I have those issues covered ,maybe a second pair of eyes would do , my console is giving me a "string expected error".

I have already included my jquery ,bootstrap bundle and the bootstrap js in that order. Using bootstrap 4 by the way thanks :)

                <nav class="navbar navbar-expand-md navbar-light  bg-warning    px-5 py-0">

                       <button class="navbar-toggler" data-toggle="collapse" data-target="#navmenu" >
                           <span class="navbar-toggler-icon" ></span>
                       </button>

                    <div class="collapse navbar-collapse" id="navmenu">

                        <ul class="navbar-nav ">

                        <li class="nav-item ">   <a class="nav-link " href="#">   Home               </a>    </li>
                        <li class="nav-item">   <a class="nav-link" href="#">     About us           </a>    </li>
                        <li class="nav-item">   <a class="nav-link" href="#">     Contact            </a>    </li>
                        <li class="nav-item">   <a class="nav-link" href="#">     Register           </a>    </li>
                        <li class="nav-item">   <a class="nav-link" href="#">     Virtual Classroom  </a>    </li>
                        </ul>
                    </div>
                </nav>

回答1:

Your codes are working on me. Can you paste those cdn addresses between body tags?

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

回答2:

I test your code with bootstrap 4 below have this snippet. You code is working. I found an issue in your understanding to bootstrap navbar collapsing. it's screen related or browser width. If you use navbar-expand-md class bootstrap navbar won't collapse until browser width less than or equal to 767.98px.

How it work navbar collapse?

navbar without navbar-expand-* class navbar will collapse for all screen because bootstrap is mobile first design.
navbar with navbar-expand-xl class navbar will collapse only browser screen less than or equal to 1199.98px.
navbar with navbar-expand-lg class navbar will collapse only browser screen less than or equal to 991.98px.
navbar with navbar-expand-md class navbar will collapse only browser screen less than or equal to 767.98px.
navbar with navbar-expand-sm class navbar will collapse only browser screen less than or equal to 575.98px.

I suggest you to check your code in specific browser window. Use Ctrl+Shift+I for Chrome to open inspect element or you can use right click on mouse in inspect element. Then toggle device toolbar or Ctrl+Shift+M to check specific width.

Also check Bootstrap css in head tag. jQuery, Popper.js and Bootstrap.js will add respectively before end of the body tag. You should add meta view port in head tag <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light  bg-warning    px-5 py-0">

                       <button class="navbar-toggler" data-toggle="collapse" data-target="#navmenu" >
                           <span class="navbar-toggler-icon" ></span>
                       </button>

                    <div class="collapse navbar-collapse" id="navmenu">

                        <ul class="navbar-nav ">

                        <li class="nav-item ">   <a class="nav-link " href="#">   Home               </a>    </li>
                        <li class="nav-item">   <a class="nav-link" href="#">     About us           </a>    </li>
                        <li class="nav-item">   <a class="nav-link" href="#">     Contact            </a>    </li>
                        <li class="nav-item">   <a class="nav-link" href="#">     Register           </a>    </li>
                        <li class="nav-item">   <a class="nav-link" href="#">     Virtual Classroom  </a>    </li>
                        </ul>
                    </div>
                </nav>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

来源：https://stackoverflow.com/questions/61428942/bootstrap-4-navbar-is-not-toggling

标签

html

twitter-bootstrap