我正在试验网格系统(没有引导程序(，但我遇到了一个问题。我的4个div(包含占位符(都应该占25%，但它们没有排成一行，只有3个。但4x25%＝100%。当我投入20%时，它很合适，但为什么？当我去掉10%的容器余量时，情况也是一样的。
问题出在哪里？提前感谢！
看看这里的开发工具屏幕截图
我的代码是：
/* Book page */
#book-container {
margin: 10%;
}
.h-header {
background-color: #5f1c36;
height: 150px;
}
.book-divs {
display: inline-block;
}
/* Simple Responsive Framework. */
.row {
width: 100%;
}
/********** Large devices only **********/
@media (min-width: 1025px) {
.col-lg-1 {
width: 8.33%;
}
.col-lg-2 {
width: 16.66%;
}
.col-lg-3 {
width: 25%;
}
.col-lg-4 {
width: 33.33%;
}
.col-lg-5 {
width: 41.66%;
}
.col-lg-6 {
width: 50%;
}
.col-lg-7 {
width: 58.33%;
}
.col-lg-8 {
width: 66.66%;
}
.col-lg-9 {
width: 74.99%;
}
.col-lg-10 {
width: 83.33%;
}
.col-lg-11 {
width: 91.66%;
}
.col-lg-12 {
width: 100%;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/min/tiny-slider.js"></script>
<script src="https://kit.fontawesome.com/99f2f640c0.js" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css">
<link rel="stylesheet" href="/css/style.css">
<title> CG </title>
</head>
<body>
<div class="row">
<div class="h-header"></div>
</div>
<div id="book-container">
<div class="row">
<div>
<div class="col-lg-3 col-md-3 col-sm-6 book-divs ">
<img src="https://via.placeholder.com/200x300">
</div>
<div class="col-lg-3 col-md-3 col-sm-6 book-divs ">
<img src="https://via.placeholder.com/200x300">
</div>
<div class="col-lg-3 col-md-3 col-sm-6 book-divs ">
<img src="https://via.placeholder.com/200x300">
</div>
<div class="col-lg-3 col-md-3 col-sm-6 book-divs ">
<img src="https://via.placeholder.com/200x300">
</div>
</div>
</div>
</body>
</html>-您可以使用；卡尔(("当您想要调整div宽度时
https://developer.mozilla.org/en-US/docs/Web/CSS/calc((
--显示内联块在HTML中包含一些默认空间。
--在你的代码中，我在"；书籍divs"&在"；col-md-3"；我使用calc((函数来保持像这样的空间宽度：calc(25%-33px(。
--使用宽度：100%i fi
/* Book page */
body{
margin: 0;
}
#book-container {
margin: 10%;
}
.h-header {
background-color: #5f1c36;
height: 150px;
}
.book-divs {
padding: 15px;
display: inline-block;
}
/* Simple Responsive Framework. */
.row {
width: 100%;
}
.book-wrapper .book-divs img {
width: 100%;
}
/********** Large devices only **********/
@media (min-width: 1025px) {
.col-lg-1 {
width: 8.33%;
}
.col-lg-2 {
width: 16.66%;
}
.col-lg-3 {
width: calc(25% - 33px);
}
.col-lg-4 {
width: 33.33%;
}
.col-lg-5 {
width: 41.66%;
}
.col-lg-6 {
width: 50%;
}
.col-lg-7 {
width: 58.33%;
}
.col-lg-8 {
width: 66.66%;
}
.col-lg-9 {
width: 74.99%;
}
.col-lg-10 {
width: 83.33%;
}
.col-lg-11 {
width: 91.66%;
}
.col-lg-12 {
width: 100%;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/min/tiny-slider.js"></script>
<script src="https://kit.fontawesome.com/99f2f640c0.js" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css">
<link rel="stylesheet" href="/css/style.css">
<title> CG </title>
</head>
<body>
<div class="row">
<div class="h-header"></div>
</div>
<div id="book-container">
<div class="row">
<div class="book-wrapper">
<div class="col-lg-3 col-md-3 col-sm-6 book-divs ">
<img src="https://via.placeholder.com/200x300">
</div>
<div class="col-lg-3 col-md-3 col-sm-6 book-divs ">
<img src="https://via.placeholder.com/200x300">
</div>
<div class="col-lg-3 col-md-3 col-sm-6 book-divs ">
<img src="https://via.placeholder.com/200x300">
</div>
<div class="col-lg-3 col-md-3 col-sm-6 book-divs ">
<img src="https://via.placeholder.com/200x300">
</div>
</div>
</div>
</body>
<style type="text/css">
</style>
</html>