为什么我的使用 Bootstrap 的代码不会在缩略图行之间添加水平空间

Question

我正在使用引导程序制作缩略图网格。图像之间的垂直间距会自动显示，但没有水平间距。这些图像相互接触。

我尝试重新排列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>

Answer 1

如果我

理解正确，那么这应该是答案，请查看 - 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;
}