bookUpdate.html页面Bootstrap样式失效问题求助

bookUpdate.html页面无法正常运行，仅能通过bookList.html页面的「编辑」按钮打开。其他页面的Bootstrap样式均可正常加载，手动添加<link rel="stylesheet" type="text/css" th:href="@{/webjars/bootstrap/css/bootstrap.min.css}" />代码后仍未解决问题。

页面显示异常截图：

当前bookUpdate.html代码如下：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity5"
layout:decorate="~{fragments/main_layout}">
<body>
<div layout:fragment="content" class="container mySpace">
    <form th:action="@{/bookUpdate/__${book.id}__}" th:object="${book.id}"
        method="post">
        <div class="form-group">
            <label for="topic" class="form-control-label">Topic</label> <input
                type="text" class="form-control" th:field="${book.topic}"
                id="topic" />
        </div>

        <div class="form-group">
            <label for="description" class="form-control-label">Description</label>
            <textarea class="form-control" th:field="${book.description}"
                id="description" style="height: 95px"></textarea>
        </div>

        <div class="form-group">
            <label for="link" class="form-control-label">Link</label> <input
                type="text" class="form-control" th:field="${book.link}" id="link" />
        </div>

        <input type="submit" value="Submit" class="btn btn-primary" />
    </form>
</div>
</body>
</html>

1. 修正Thymeleaf表单绑定错误 #

表单的th:object属性绑定错误，应绑定完整的book对象而非book.id。th:field依赖th:object进行字段解析，绑定book.id会导致字段解析失败，引发页面渲染异常，间接影响样式加载。

将原表单标签：

<form th:action="@{/bookUpdate/__${book.id}__}" th:object="${book.id}" method="post">

修改为：

<form th:action="@{/bookUpdate/{id}(id=${book.id})}" th:object="${book}" method="post">

同时优化了th:action的写法，采用Thymeleaf标准URL变量语法更规范。

2. 确认布局文件的资源引入 #

由于页面使用layout:decorate="~{fragments/main_layout}"继承布局，需确保main_layout.html中正确引入Bootstrap资源：

• 检查<head>部分是否包含Bootstrap CSS链接：

<link rel="stylesheet" type="text/css" th:href="@{/webjars/bootstrap/css/bootstrap.min.css}" />

• 若需使用Bootstrap交互组件，还需引入依赖的jQuery和Bootstrap JS文件：

<script th:src="@{/webjars/jquery/jquery.min.js}"></script>
<script th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>

3. 修正后的完整代码 #

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity5"
layout:decorate="~{fragments/main_layout}">
<body>
<div layout:fragment="content" class="container mySpace">
    <form th:action="@{/bookUpdate/{id}(id=${book.id})}" th:object="${book}" method="post">
        <div class="form-group">
            <label for="topic" class="form-control-label">Topic</label> 
            <input type="text" class="form-control" th:field="${book.topic}" id="topic" />
        </div>

        <div class="form-group">
            <label for="description" class="form-control-label">Description</label>
            <textarea class="form-control" th:field="${book.description}" id="description" style="height: 95px"></textarea>
        </div>

        <div class="form-group">
            <label for="link" class="form-control-label">Link</label> 
            <input type="text" class="form-control" th:field="${book.link}" id="link" />
        </div>

        <input type="submit" value="Submit" class="btn btn-primary" />
    </form>
</div>
</body>
</html>

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