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

Question

我正在使用 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>

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;
}