Chrome在bootstrap.min.js中显示错误

Question

Uncaught Error: Bootstrap's JavaScript requires jQuery
at bootstrap.min.js:6

The navbar doesn't resize when using Google-Chrome's Toggle Device Toolbar. I found a similar question where the problem was solved by making sure the .js files are getting loaded properly. But in my case this doesn't work.

However, the same works fine in Firefox.

 .navbar { margin-bottom: 0; background-color: #0E293C; z-index: 99; border: 0; font-size: 14px !important; line-height: 1.42857143 !important; letter-spacing: 4px; border-radius: 0; font-family: 'Muli', sans-serif; } .navbar li a, .navbar .navbar-brand { color: #19BBD5 !important; } .navbar-nav li a:hover, .navbar-nav li.active a { color: #C6DAEC !important; background-color: #0E293C !important; } .navbar-default .navbar-toggle { border-color: transparent; color: #fff !important; } 

 <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Company Name</a> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav navbar-right"> <li><a href="#updates">Updates</a></li> <li><a href="#about">About</a></li> <li><a href="#how">How to use</a></li> <li><a href="#pricing">Pricing</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#googleMap">Find Us</a></li> </ul> </div> </div> </nav> 

The website has been written by following this tutorial

Answer 1

The root cause of this issue was that I had an <iframe> element which was not getting loaded properly. Thus the Error404 box wasn't resizing.

In CSS I added overflow-x:hidden under body this made sure that navbar gets resized when I open my bootstrap website on screens of different sizes. And in my html contained the <iframe> element in container.