Html 美化来自JavaSpring的引导模板
我有一个spring项目，重点是要借出的图书馆书籍。下面是从服务器端呈现的html代码。柱子歪了 以下是html代码（和第一行）：Html 美化来自JavaSpring的引导模板,html,css,spring,twitter-bootstrap,thymeleaf,Html,Css,Spring,Twitter Bootstrap,Thymeleaf,我有一个spring项目，重点是要借出的图书馆书籍。下面是从服务器端呈现的html代码。柱子歪了 以下是html代码（和第一行）： 书 ：根{ --星体大小：30px； --星星颜色：#fff； --星背景：#fc0； } .明星{ --百分比：计算（var（--评级）/5*100%）； 显示：内联块； 字体大小：var（--星形大小）； 字体家族：时代； 线高：1； } .星星：：以前{ 内容：“★★★★★"; 字母间距：3px； 背景：线性梯度（90度，var（--星星背景）var（--
书
：根{
--星体大小：30px；
--星星颜色：#fff；
--星背景：#fc0；
}
.明星{
--百分比：计算（var（--评级）/5*100%）；
显示：内联块；
字体大小：var（--星形大小）；
字体家族：时代；
线高：1；
}
.星星：：以前{
内容：“★★★★★";
字母间距：3px；
背景：线性梯度（90度，var（--星星背景）var（--百分比），var（--星星颜色）var（--百分比））；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
}
.书{
顶部：100px；
填充底部：30px；
}
.图书链接{
位置：相对位置；
左：85%；
顶部：100px；
文本对齐：居中！重要；
}
.书籍形象{
位置：相对位置；
左：50%；
顶部：-15px；
}
.中{
位置：相对位置；
最高：80%；
左：90%；
}
标题
保险商实验室{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景色：#333；
}
李{
浮动：左；
}
#容器{
背景色：#fff；
}
李阿{
显示：块；
颜色：白色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
/*悬停时将链接颜色更改为#111（黑色）*/
李娜：停下来{
背景色：#111；
}
.项目{
}
.描述{
显示器：flex；
证明内容：中心；
}
.搜索提交{
字体系列：“字体很棒\5免费”；
字号：900；
}
.搜索{
位置：绝对位置；
浮动：对；
顶部：10px；
右：30px；
}
感谢您的帮助看起来您断开了CDN的链接。一些自定义样式阻止了引导样式。只需删除它们，所有项目都会显示出来 例如：
<html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Books</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style>
:root {
--star-size: 30px;
--star-color: #fff;
--star-background: #fc0;
}
.Stars {
--percent: calc(var(--rating) / 5 * 100%);
display: inline-block;
font-size: var(--star-size);
font-family: Times;
line-height: 1;
}
.Stars::before {
content: "★★★★★";
letter-spacing: 3px;
background: linear-gradient(90deg, var(--star-background) var(--percent), var(--star-color) var(--percent));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.book{
top:100px;
padding-bottom: 30px;
}
.book-link{
position: relative;
left:85%;
top:100px;
text-align: center !important;
}
.book-image{
position: relative;
left:50%;
top: -15px;
}
.middle{
position: relative;
top:80%;
left:90%;
}
</style>
</head>
<body>
<div>
<div><!DOCTYPE html>
<html lang="en">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://kit.fontawesome.com/0c436d239f.js" crossorigin="anonymous"></script>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
#container{
background-color: #fff;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
.item{
}
.desc{
display: flex;
justify-content: center;
}
.search-submit{
font-family: 'Font Awesome\ 5 Free';
font-weight: 900;
}
.search{
position: absolute;
float: right;
top: 10px;
right: 30px;
}
</style>
</head>
<body>
<ul>
<div class="nav-wrapper">
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="/"><i class="fa fa-home" aria-hidden="true"></i></a> </li>
<li><a href="logout">Logout</a></li>
<li><a href="wishlist">Wishlist</a></li>
<li><a href="current">Current books</a></li>
<li><a href="Recomended">Recomended</a></li>
<li><a href="settings">Settings</a></li>
<form class="search" action="/search">
<input type="text" name="search_query">
<input type="submit" class="search-submit" value=""/>
</button>
</form>
</ul>
</div>
</ul>
</body>
</html></div>
</div>
<div class="main">
<div class="row">
<div class="col-md-3 book">
<div class="card mb-3 box-shadow bg-light">
<a href="https://hclib.bibliocommons.com/item/show/5704922109" class="book-link">High Achiever</a>
<a href="https://hclib.bibliocommons.com/item/show/5704922109">
<img src="https://secure.syndetics.com/index.aspx?isbn=9781979830287/MC.GIF&client=hennp&type=xw12&oclc=C.GIF&client=hennp&type=xw12&oclc=" height="200" width="130" class="card-img-top book-image">
<p class="middle Stars" style="--rating: 4.94892"></p>
</a>
</div>
</div>
<div class="col-md-3 book">
<div class="card mb-3 box-shadow bg-light">
<a href="https://rclreads.bibliocommons.com/item/show/1230417166" class="book-link">Craveable Keto Cookbook</a>
<a href="https://rclreads.bibliocommons.com/item/show/1230417166">
<img src="https://secure.syndetics.com/index.aspx?isbn=9781628602715/MC.GIF&client=ramp&type=xw12&oclc=C.GIF&client=hennp&type=xw12&oclc=" height="200" width="130" class="card-img-top book-image">
<p class="middle Stars" style="--rating: 4.92254"></p>
</a>
</div>
</div>
<div class="col-md-3 book">
<div class="card mb-3 box-shadow bg-light">
<a href="https://hclib.bibliocommons.com/item/show/5684947109" class="book-link">Fail Until You Don't</a>
<a href="https://hclib.bibliocommons.com/item/show/5684947109">
<img src="https://secure.syndetics.com/index.aspx?isbn=9780062795816/MC.GIF&client=hennp&type=xw12&oclc=C.GIF&client=hennp&type=xw12&oclc=" height="200" width="130" class="card-img-top book-image">
<p class="middle Stars" style="--rating: 4.91805"></p>
</a>
</div>
</div>
<div class="col-md-3 book">
<div class="card mb-3 box-shadow bg-light">
<a href="https://hclib.bibliocommons.com/item/show/5685848109" class="book-link">Believe Bigger</a>
<a href="https://hclib.bibliocommons.com/item/show/5685848109">
<img src="https://secure.syndetics.com/index.aspx?isbn=9781501165672/MC.GIF&client=hennp&type=xw12&oclc=C.GIF&client=hennp&type=xw12&oclc=" height="200" width="130" class="card-img-top book-image">
<p class="middle Stars" style="--rating: 4.91794"></p>
</a>
</div>
</div>
</div>