html - 我的照片库中有一个空白栏

Question

我有点新，还在学习，但今天我下载了一个模板来开始，当我更改图像时，突然出现一个空白列:https://gyazo.com/a62f5e3de25876c9262d9894cc7d39f3 <--- 看图片。

我已经尝试更改周围的列以及将 md-4 更改为类似 md-3。

<div class="col-md-4 col-xs-6 work">
                <img class="img-responsive" src="img/Schorisse 201204-11.jpg" alt="oops"">
                <div class="overlay"></div>
                <div class="work-content">
                    <span>De kinderen</span>
                    <h3>(Lekker) samen op de trampoline</h3>
                    <div class="work-link">
                        <a href="#"><i class="fa fa-external-link"></i></a>
                        <a class="lightbox" href="img/Schorisse 201204-11.jpg"><i class="fa fa-search"></i></a>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4 col-xs-6 work">
                <img class="img-responsive" src="img/3Z2A3280 (1).jpg" alt="oops">
                <div class="overlay"></div>
                <div class="work-content">
                    <span>Trouwfeest</span>
                    <h3>Piet</h3>
                    <div class="work-link">
                        <a href="#"><i class="fa fa-external-link"></i></a>
                        <a class="lightbox" href="img/3Z2A3280 (1).jpg" alt="oops"><i class="fa fa-search"></i></a>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4 col-xs-6 work">
                <img class="img-responsive" src="img/059.jpg" alt="oops">
                <div class="overlay"></div>
                <div class="work-content">
                    <span>Gezinfototjes</span>
                    <h3>En wat zien ze er gelukkig uit!</h3>
                    <div class="work-link">
                        <a href="#"><i class="fa fa-external-link"></i></a>
                        <a class="lightbox" href="img/IMG-20170408-WA0012.jpg" alt="oops">    ><i class="fa fa-search"></i></a>
                    </div>
                </div>
            </div>
            

                <div class="col-md-4 col-xs-6 work">
                <img class="img-responsive" src="img/021.jpg" alt="oops">
                <div class="overlay"></div>
                <div class="work-content">
                    <span>Trippy en Bomma</span>
                    <h3>Beetje gek doen!</h3>
                    <div class="work-link">
                        <a href="#"><i class="fa fa-external-link"></i></a>
                        <a class="lightbox" href="img/021.jpg" alt="oops"><i class="fa fa-search"></i></a>
                    </div>
                </div>
            </div>


                
            <div class="col-md-4 col-xs-6 work">
                <img class="img-responsive" src="img/IMG_4028.JPG" alt="oops">
                <div class="overlay"></div>
                <div class="work-content">
                    <span>De bomma en bompa</span>
                    <h3>Ruik ik daar bier?!</h3>
                    <div class="work-link">
                        <a href="#"><i class="fa fa-external-link"></i></a>
                        <a class="lightbox" href="img/IMG_4028.JPG" alt="oops"><i class="fa fa-search"></i></a>
                    </div>
                </div>
            </div>
            

            
            <div class="col-md-4 col-xs-6 work">
                <img class="img-responsive" src="img/IMG-20160220-WA0004.jpg" alt="oops">
                <div class="overlay"></div>
                <div class="work-content">
                    <span>Gezinfototjes</span>
                    <h3>En wat zien ze er gelukkig uit!!</h3>
                    <div class="work-link">
                        <a href="#"><i class="fa fa-external-link"></i></a>
                        <a class="lightbox" href="img/IMG-20160220-WA0004.jpg" alt="oops"><i class="fa fa-search"></i></a>
                    </div>
                </div>
            </div>
            <!-- /Work -->

        </div>
        <!-- /Row -->

    </div>
    <!-- /Container -->

</div>

我预计问题出在图像 3 和 4 之间，但我不确定。

Answer 1

一种解决方案是使用带有选项 flex-wrap: wrap 的 flexbox，但这可能会破坏您的 Bootstrap 网格(看起来像 Bootstrap)。

另一种解决方案是使用像 Masonry ( https://masonry.desandro.com/ ) 这样的 JavaScript 插件，这将计算每张照片的位置并创建一个漂亮的网格。