我有一个spring项目，重点是要借出的图书馆图书。下面是从服务器端呈现的html代码。柱子歪了！
下面是html代码（和第一行）：https://pastebin.com/jz0ux8dw
<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>以下是截图：
我试过引导卡和使用引导行，但他们仍然不是甚至。谢谢你的帮助
1条答案
按热度按时间z3yyvxxp1#
看起来您断开了与cdn的链接。和一些自定义样式制动引导样式。只需将它们和所有项目删除即可
这里可以看到jsfiddle示例
举个例子：