Chrome在bootstrap.min.js中显示错误 [英] Chrome shows error in bootstrap.min.js

问题描述

Chrome在其控制台中显示以下错误。

Chrome shows following error in its console.

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

使用Google-Chrome的Toggle设备工具栏时，导航栏不会调整大小。但是，同样适用于Firefox。

The navbar doesn't resize when using Google-Chrome's Toggle Device Toolbar. 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>

我的尝试：



我发现了类似的问题通过确保.js文件正确加载来解决问题。但就我而言，这不起作用。我确保首先通过将jQuery.js置于所有引导程序资源的顶部来加载jQuery.js。该网站是按照教程编写的。

What I have tried:

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. I made sure that jQuery.js is loaded first by putting it at the top of all the bootstrap resources. The website has been written by following this tutorial.

推荐答案

一个

iframe

元素已经离开了bootstrap列。



添加以下css帮助解决问题

element was going out of the bootstrap columns.

Adding following css helped resolve the issue

html, body {
    width: 100%;
    overflow-x: hidden;
}

这篇关于Chrome在bootstrap.min.js中显示错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！