PHP项目引入配置Bootstrap后样式不生效问题排查

你遇到的Bootstrap样式不生效问题由3个代码错误+1个常见环境问题共同导致：

• 表单组件未嵌入主页面结构：当前index.php的<body>标签内仅引入了Bootstrap的JS脚本，你写的表单代码完全没有插入到页面的DOM结构中，浏览器渲染时根本不会加载表单内容，自然不会应用对应样式。
• 提交按钮class属性断裂：提交按钮的class="btn btn-primary"属性被换行和多余空格拆分，浏览器无法正确识别btn-primary样式类，导致按钮样式失效。
• 表单标签属性不匹配：密码输入框的<label>标签for属性值为inputPassword3，但对应输入框的实际id是inputPassword，点击标签无法自动聚焦到输入框，属于可访问性逻辑错误。
• 资源加载拦截：如果代码修正后仍无样式，大概率是本地网络拦截了jsdelivr的CDN资源，可通过浏览器F12开发者工具的「网络」面板查看bootstrap.min.css的请求状态，状态码非200即为加载失败。

将以下内容保存为index.php，放到PHP运行环境的站点目录下即可正常加载样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
    <title>Bootstrap Form Test</title>
</head>
<body>
    <!-- 表单放在容器内，放在JS脚本引入之前 -->
    <div class="container mt-5">
        <form role="form" method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
            <div class="form-group row mb-3">
                <label for="inputEmail" class="col-sm-2 col-form-label">Email</label>
                <div class="col-sm-10">
                    <input type="email" class="form-control" id="inputEmail" name="email" placeholder="Email">
                </div>
            </div>
            <div class="form-group row mb-3">
                <label for="inputUser" class="col-sm-2 col-form-label">User Name</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="inputUser" name="user" placeholder="Username">
                </div>
            </div>
            <div class="form-group row mb-3">
                <!-- 修正label的for属性值，和input id保持一致 -->
                <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
                <div class="col-sm-10">
                    <input type="password" class="form-control" id="inputPassword" name="password" placeholder="Password">
                </div>
            </div>
            <div class="form-group row">
                <div class="offset-sm-2 col-sm-10">
                    <!-- 修正class换行问题，类名写在同一行无多余空格 -->
                    <input type="submit" value="Sign in" name="submit" class="btn btn-primary"/>
                </div>
            </div>
        </form>
    </div>

    <!-- JS脚本统一放在body末尾，避免阻塞页面内容渲染 -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-kjU+l4N0Yf4ZOJErLsIcvOU2qSb74wXpOhqTvwVx3OElZRweTnQ6d31fXEoRD1Jy" crossorigin="anonymous"></script>
</body>
</html>

• 必须通过PHP环境的HTTP地址访问（比如http://localhost/你的项目路径/index.php），不要直接双击PHP文件用file协议打开，否则PHP代码无法解析、部分跨域资源也会加载失败。
• 如果CDN资源加载失败，直接把Bootstrap的CSS、JS文件下载到本地项目目录，改用相对路径引入即可，不需要依赖外部网络。

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