Bootstrap JS 未正确加载答案

【问题标题】：Bootstrap JS not loading correctlyBootstrap JS 未正确加载
【发布时间】：2021-04-02 12:04:24
【问题描述】：

所以，我正在尝试在 React 应用程序中使用 Bootstrap。 Bootstrap CSS 可以正常工作，但是任何需要 Bootstrap JS 文件的东西都不起作用（下拉菜单、模式等）这是我的代码。我什至尝试复制起始模板并改用它。它不起作用。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />
  <meta name="description" content="Web site created using create-react-app" />
  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
  <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
  <title>React App</title>

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
  <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->


  <!-- 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.3/umd/popper.min.js"
    integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh"
    crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"
    integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ"
    crossorigin="anonymous"></script>

    <!-- FontAwesome JS -->
    <script src="https://kit.fontawesome.com/8f8a8c35a9.js" crossorigin="anonymous"></script>
</body>

</html>

我做错了什么？感谢你的帮助！ :)))

【问题讨论】：

可能与此 question 重复。请看一看。
您是否在您的应用程序中使用react-bootstrap 包？这可以使引导程序的使用更容易
@antoineso 我不知道有 react-bootstrap 包。我会试试看，也许它会解决我的问题。
@ikhvjs 我不想将

标签： javascript reactjs twitter-bootstrap frontend

【解决方案1】：

您正在使用不同版本的 Bootstrap for CSS 和 JS

5.0：https://getbootstrap.com/docs/5.0/getting-started/download/#cdn-via-jsdelivr

4.6：https://getbootstrap.com/docs/4.6/getting-started/download/#jsdelivr

【讨论】：

非常感谢！这解决了我的问题。事后看来，这似乎是一个愚蠢的错误。从现在开始我会更加小心。再次感谢。