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>Serge en Monique</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>Ilanka 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

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

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

Answer 2

您不应在引导程序中将行之外的列：

每个

<div class="col-*">

应始终用<div class="row">

包裹

喜欢：

<div class="row">
   <div class="col-*"></div>
   <div class="col-*"></div>
</div

我的相册中有一个空白的列

2 个答案: