Bootstrap 4 引导排序不'；t工作（导入的mb问题）
我想对我的表格进行分类，但我对引导和前端完全不熟悉，所以使用了本指南 请帮助我理解我做错了什么，我将非常感激Bootstrap 4 引导排序不'；t工作（导入的mb问题）,bootstrap-4,thymeleaf,Bootstrap 4,Thymeleaf,我想对我的表格进行分类，但我对引导和前端完全不熟悉，所以使用了本指南 请帮助我理解我做错了什么，我将非常感激 <!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html"> <head> <title>Spr
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
<title>SpringMVC + Thymeleaf + Bootstrap 4 Table Example</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<style>table.dataTable thead .sorting:after,
table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_asc_disabled:before,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_desc_disabled:after,
table.dataTable thead .sorting_desc_disabled:before {
bottom: .5em;
}</style>
</head>
<body>
<button type="button" class="btn btn-primary">Primary</button>
<div class="container">
<h1>Price List</h1>
<div class="row col-md-7 table-responsive">
<table id="dtBasicExample" class="table table-striped table-bordered table-sm" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr th:each="procedure:${procedures}">
<td th:text="${procedure.getName()}"></td>
<td th:text="${procedure.getPrice()}"></td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
$(document).ready(function () {
$('#dtBasicExample').DataTable();
$('.dataTables_length').addClass('bs-select');
});
</script>
SpringMVC+Thymeleaf+Bootstrap 4表格示例
table.dataTable thead.排序：在，
table.dataTable thead.排序：在，
table.dataTable thead.sorting\u asc:after，
table.dataTable thead.sorting\u asc:before，
table.dataTable thead.sorting\u asc\u禁用：之后，
table.dataTable thead.sorting\u asc\u disabled:before，
table.dataTable thead.sorting_desc:after，
table.dataTable thead.sorting_desc:before，
table.dataTable thead.sorting_desc_禁用：之后，
table.dataTable thead.sorting\u desc\u禁用：之前{
底部：.5em；
}
主要的，重要的
价目表
名称
价格
$（文档）.ready（函数（）{
$（'#dtBasicExample'）.DataTable（）；
$（'.dataTables_length'）.addClass（'bs-select'）；
});
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css"></link>