今天，我正在尝试制作简单的作品集。我找到了 this template对于 Bootstrap 。它看起来很漂亮，但是当我添加一些其他照片时，它开始出现空白:
有没有什么办法可以把这些照片上移，这样就没有空格了？
CSS:
body {
background-color: #434c50;
min-height: 100vh;
font: normal 16px sans-serif;
padding: 40px 0;
}
.container.gallery-container {
background-color: #fff;
color: #35373a;
min-height: 100vh;
padding: 30px 50px;
}
.gallery-container h1 {
text-align: center;
margin-top: 50px;
font-family: 'Droid Sans', sans-serif;
font-weight: bold;
}
.gallery-container p.page-description {
text-align: center;
margin: 25px auto;
font-size: 18px;
color: #999;
}
.tz-gallery {
padding: 40px;
}
/* Override bootstrap column paddings */
.tz-gallery .row > div {
padding: 2px;
}
.tz-gallery .lightbox img {
width: 100%;
border-radius: 0;
position: relative;
}
.tz-gallery .lightbox:before {
position: absolute;
top: 50%;
left: 50%;
margin-top: -13px;
margin-left: -13px;
opacity: 0;
color: #fff;
font-size: 26px;
font-family: 'Glyphicons Halflings';
content: '\e003';
pointer-events: none;
z-index: 9000;
transition: 0.4s;
}
.tz-gallery .lightbox:after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
background-color: rgba(217, 217, 217, 0.5);
content: '';
transition: 0.4s;
}
.tz-gallery .lightbox:hover:after,
.tz-gallery .lightbox:hover:before {
opacity: 1;
}
.baguetteBox-button {
background-color: transparent !important;
}
@media(max-width: 768px) {
body {
padding: 0;
}
}
.menu {
color: #999 !important;
text-align: right;
}
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Freebie: 4 Bootstrap Gallery Templates</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Droid+Sans:400,700" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.8.1/baguetteBox.min.css">
<link rel="stylesheet" href="fluid-gallery.css">
</head>
<body>
<div class="container gallery-container">
<?php include 'navbar.php';?>
<h1>Bootstrap 3 Gallery</h1>
<p class="page-description text-center">Fluid Layout With Overlay Effect</p>
<div class="tz-gallery">
<div class="row">
<div class="col-sm-6 col-md-4">
<a class="lightbox" href="../images/park.jpg">
<img src="../images/park.jpg" alt="Park">
</a>
</div>
<div class="col-sm-6 col-md-4">
<a class="lightbox" href="image.jpg">
<img src="image.jpg" alt="Bridge">
</a>
</div>
<div class="col-sm-6 col-md-4">
<a class="lightbox" href="../images/park.jpg">
<img src="../images/park.jpg" alt="Park">
</a>
</div>
<div class="col-sm-6 col-md-4">
<a class="lightbox" href="../images/tunnel.jpg">
<img src="../images/tunnel.jpg" alt="Tunnel">
</a>
</div>
<div class="col-sm-6 col-md-4">
<a class="lightbox" href="../images/traffic.jpg">
<img src="../images/traffic.jpg" alt="Traffic">
</a>
</div>
<div class="col-sm-6 col-md-4">
<a class="lightbox" href="../images/coast.jpg">
<img src="../images/coast.jpg" alt="Coast">
</a>
</div>
<div class="col-sm-6 col-md-4">
<a class="lightbox" href="../images/rails.jpg">
<img src="../images/rails.jpg" alt="Rails">
</a>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.8.1/baguetteBox.min.js"></script>
<script>
baguetteBox.run('.tz-gallery');
</script>
</body>
</html>
最佳答案
不幸的是，布局依赖于图像是设置高度，或者是设置高度的两倍。一旦开始输入非 1:1 或 2:1 高度的图像，就会出现间隙。您可以切换到列而不是行布局，但这样您将无法让元素跨越两列。
如果您受制于此特定布局，也许您可以裁剪适合 1:1、1:2、2:1 和 2:2 模式的图像版本，并将这些裁剪版本用作链接到完整的未裁剪版本的缩略图。
关于jquery - Bootstrap Gallery 空白区域，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46501536/