我正在使用bootstrap制作缩略图网格。图像之间的垂直间距自动出现,但没有水平间距。图像彼此接触。
我试过重新安排div。
它应该自动在每个拇指指甲周围有均匀的空间
<!---jumbo-->
<div class ="container">
<div class="jumbotron">
<h1 class="display-4"><i class="fas fa-camera"></i> Image Gallery</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
</div>
<!--Images-->
<div class="row">
<div class="col-lg-4 col-md-6">
<img src="web images/darkbutterfly.jpg"class="img-thumbnail">
</div>
<div class="col-lg-4 col-md-6">
<img src="web images/darkbutterfly.jpg" class="img-thumbnail">
</div>
<div class="col-lg-4 col-md-6">
<img src="web images/darkbutterfly.jpg" class="img-thumbnail">
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-6">
<img src="web images/darkbutterfly.jpg"class="img-thumbnail">
</div>
<div class="col-lg-4 col-md-6">
<img src="web images/darkbutterfly.jpg" class="img-thumbnail">
</div>
<div class="col-lg-4 col-md-6">
<img src="web images/darkbutterfly.jpg" class="img-thumbnail">
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-6">
<img src="web images/darkbutterfly.jpg"class="img-thumbnail">
</div>
<div class="col-lg-4 col-md-6">
<img src="web images/darkbutterfly.jpg" class="img-thumbnail">
</div>
<div class="col-lg-4 col-md-6">
<img src="web images/darkbutterfly.jpg" class="img-thumbnail">
</div>
</div>
</div>
如果我理解正确,那么这应该是答案,检查出来 - https://codepen.io/anon/pen/MRgdgX
<div class ="container">
<div class="jumbotron row">
<div class="col-12">
<h1 class="display-4"><i class="fas fa-camera"></i> Image Gallery</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-6">
<img src="https://via.placeholder.com/300" class="img-thumbnail">
</div>
<div class="col-lg-4 col-md-6">
<img src="https://via.placeholder.com/300" class="img-thumbnail">
</div>
<div class="col-lg-4 col-md-6">
<img src="https://via.placeholder.com/300" class="img-thumbnail">
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-6">
<img src="https://via.placeholder.com/300" class="img-thumbnail">
</div>
<div class="col-lg-4 col-md-6">
<img src="https://via.placeholder.com/300" class="img-thumbnail">
</div>
<div class="col-lg-4 col-md-6">
<img src="https://via.placeholder.com/300" class="img-thumbnail">
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-6">
<img src="https://via.placeholder.com/300" class="img-thumbnail">
</div>
<div class="col-lg-4 col-md-6">
<img src="https://via.placeholder.com/300" class="img-thumbnail">
</div>
<div class="col-lg-4 col-md-6">
<img src="https://via.placeholder.com/300" class="img-thumbnail">
</div>
</div>
.row {
display: flex;
flex-wrap: wrap;
}
.jumbotron {
margin: 0 1rem;
}
img {
display: flex;
margin: 1rem;
}