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

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

1 个答案: