如何解决Bootstrap在Spring MVC项目中样式加载失效的问题

• 在Bootstrap Studio中完成带样式的Bootstrap页面开发，对应的项目文件结构可参考提问者附的结构截图
• 将所有导出的项目文件移至Spring项目的WEB-INF/view文件夹根目录下，统一修改为JSP格式
• 编写控制器，将localhost:8080/greeting的URL路径映射到对应JSP页面
• 页面的预期渲染效果可参考提问者附的正常效果图
• 实际打开页面的显示为无样式错乱效果，与预期偏差较大
• 核心诉求：不需要从0开始讲解Spring集成Bootstrap的完整原理，只需要可落地的快速解决步骤，把页面跑通
• 当前使用的greeting.jsp代码如下：

<!DOCTYPE html>
<html style="background: #000514;">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>Dashboard - Logiweb Brand</title>
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i">
    <link rel="stylesheet" href="assets/fonts/fontawesome-all.min.css">
    <link rel="stylesheet" href="assets/fonts/font-awesome.min.css">
    <link rel="stylesheet" href="assets/fonts/fontawesome5-overrides.min.css">
</head>

<body id="page-top" style="background: rgb(0,0,0);">
    <div id="wrapper">
        <div class="d-flex flex-column" id="content-wrapper" style="background: #000514;">
            <div class="text-break text-left" id="content" style="background: #000514;"></div>
        </div><a class="border rounded d-inline scroll-to-top" href="#page-top"><i class="fas fa-angle-up"></i></a>
    </div>
    <nav class="navbar navbar-light navbar-expand-md" style="color: var(--pink);background: #d70884;">
        <div class="container-fluid"><a class="navbar-brand" href="#">Brand</a><button data-toggle="collapse" class="navbar-toggler" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
            <div class="collapse navbar-collapse" id="navcol-1">
                <ul class="navbar-nav">
                    <li class="nav-item"><a class="nav-link active" href="#">First Item</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Second Item</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Third Item</a></li>
                </ul>
            </div>
            <div class="dropdown"><a class="dropdown-toggle" aria-expanded="false" data-toggle="dropdown" href="#" style="color: rgb(0,0,0);">Dropdown </a>
                <div class="dropdown-menu"><a class="dropdown-item" href="#">First Item</a><a class="dropdown-item" href="#">Second Item</a><a class="dropdown-item" href="#">Third Item</a></div>
            </div>
        </div>
    </nav>
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.js"></script>
    <script src="assets/js/theme.js"></script>
</body>

</html>

• 先明确问题根因：WEB-INF目录下的所有文件默认禁止被浏览器直接访问，当前把assets静态资源文件夹直接放在WEB-INF/view目录下，浏览器发起的所有静态资源请求都会被服务器拦截，自然加载不到css、js文件，导致页面无样式。
• 调整文件存放位置：
  • JSP页面文件保留在WEB-INF/view目录下，确保和Spring视图解析器配置的路径匹配
  • 将整个assets文件夹（包含Bootstrap核心文件、字体文件、自定义js脚本等所有静态资源）移动到Web应用的根目录，也就是和WEB-INF文件夹同级的位置，不要存放在WEB-INF路径下
• 修正资源引用路径，避免相对路径引用出错：
  • 在JSP页面顶部引入JSTL核心标签库，代码为<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  • 将所有原相对路径的静态资源引用，修改为基于项目根路径的绝对路径，比如原来的href="assets/bootstrap/css/bootstrap.min.css"替换为href="${pageContext.request.contextPath}/assets/bootstrap/css/bootstrap.min.css"，所有js、字体文件的引用路径都按这个规则统一修改
• 配置Spring放行静态资源：
  • 如果是Spring Boot项目，不需要额外配置，把assets文件夹放到resources/static目录下即可直接访问
  • 如果是传统Spring MVC项目，在Spring MVC的配置文件中添加静态资源映射规则，将/assets/**路径的请求指向存放静态资源的根目录
• 快速验证方法：修改完成后，直接在浏览器地址栏输入http://localhost:8080/项目上下文路径/assets/bootstrap/css/bootstrap.min.css，如果能正常打开看到完整的CSS代码，说明资源路径配置生效，刷新JSP页面即可看到正常渲染效果

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