Bootstrap本地引入不生效但CDN引入可正常运行的问题求助

问题描述 #

• 本地运行项目时，存放在项目运行目录的bootstrap.min.css、bootstrap.min.js引入后不生效，组件样式、交互均无法正常使用
• 替换为CDN链接引入Bootstrap后，所有组件的样式、交互功能运行正常

附原始问题代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
    <link rel="stylesheet" href="bootstrap.min.css" type="text/css">
    <script src="bootstrap.min.js"> </script>
   </head>
<body>
       <form class="row g-3">
        <div class="col-md-6">
          <label for="inputEmail4" class="form-label">Email</label>
          <input type="email" class="form-control" id="inputEmail4">
        </div>
        <div class="col-12">
          <div class="form-check">
            <input class="form-check-input" type="checkbox" id="gridCheck">
            <label class="form-check-label" for="gridCheck">
              Check me out
            </label>
          </div>
        </div>
        <div class="col-12">
          <button type="submit" class="btn btn-primary">Sign in</button>
        </div>
      </form>
</body>
</html>

注：已确认bootstrap.min.css与bootstrap.min.js文件均存放在当前项目的运行目录下。

问题原因与修复方案 #

代码存在两处核心错误，按优先级修复即可：

1. 缺失Bootstrap JS依赖
   Bootstrap 4及以上版本的JS交互组件依赖Popper库，引入的普通版bootstrap.min.js没有内置该依赖，单独引入会直接报错导致JS逻辑失效；CDN通常默认使用打包了所有依赖的bundle版本，所以可以正常运行。
   直接将本地的bootstrap.min.js替换为官方提供的bootstrap.bundle.min.js即可，该版本已内置Popper依赖，无需额外引入其他文件。

2. JS引入位置错误
   当前Bootstrap JS被放在<head>标签内，JS执行时页面DOM还未完成渲染，会导致JS无法绑定元素事件，交互功能失效。需要把所有JS引用移动到</body>标签前，也就是所有页面DOM元素的末尾。

3. 路径校验（备用排查项）
   如果修复上述两个问题后仍不生效，按F12打开浏览器开发者工具，切换到「网络」面板刷新页面，查看两个Bootstrap文件的加载状态：

• 若状态码为404：核对文件名大小写、相对路径是否正确，Linux类服务环境下文件名大小写敏感，Bootstrap.min.css和bootstrap.min.css会被识别为不同文件
• 若状态码为200但样式不生效：点进响应内容查看文件是否正确，避免把错误页面、未编译源文件当成生产版资源引入

修复后可用代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
    <link rel="stylesheet" href="bootstrap.min.css" type="text/css">
   </head>
<body>
       <form class="row g-3">
        <div class="col-md-6">
          <label for="inputEmail4" class="form-label">Email</label>
          <input type="email" class="form-control" id="inputEmail4">
        </div>
        <div class="col-12">
          <div class="form-check">
            <input class="form-check-input" type="checkbox" id="gridCheck">
            <label class="form-check-label" for="gridCheck">
              Check me out
            </label>
          </div>
        </div>
        <div class="col-12">
          <button type="submit" class="btn btn-primary">Sign in</button>
        </div>
      </form>
    <!-- JS全部放到body末尾，使用内置依赖的bundle版本 -->
    <script src="bootstrap.bundle.min.js"></script>
</body>
</html>

内容的提问来源于stack exchange，提问作者shubham00000