Bootstrap portofolio - 空网格空间

Question

我在bootstrap网格中遇到网格问题。我连续有空格。 这在桌面和移动设备上显示为。

我正在使用的代码是

  <div class="row">
        <div class="col-xs-6 col-md-3 col-sm-4  portfolio-item">
            <a href="#">
                <img class="img-responsive" src="image/book image/book1.png" alt="">
            </a>
        </div>
        <div class="col-xs-6 col-md-3 col-sm-4 portfolio-item">
            <a href="#">
                <img class="img-responsive" src="image/book image/book2.png" alt="">
            </a>
        </div>
        <div class="col-xs-6 col-md-3 col-sm-4 portfolio-item">
            <a href="#">
                <img class="img-responsive" src="image/book image/book3.png" alt="">
            </a>
        </div>
        <div class="col-xs-6 col-md-3 col-sm-4 portfolio-item">
            <a href="#">
                <img class="img-responsive" src="image/book image/book4.png" alt="">
            </a>
        </div>

         <div class="col-xs-6 col-md-3 col-sm-4 portfolio-item">
            <a href="#">
                <img class="img-responsive" src="image/book image/book4.png" alt="">
            </a>
        </div>
       </div>

我真的不知道如何解决这个问题，所以我希望有人可以给我一些建议。

Answer 1

您必须为列设置.portfolio-item { min-height: 200px; } ，因为列具有不同的高度。

200px

将syntax-rules更改为适合各自所在位置的最小值。

Answer 2

这是因为您的div上的高度不同。你有几个可能的解决方案：

1. 手动将所有div设置为相等的高度。

2. 使用类似https://github.com/liabru/jquery-match-height的内容为您设置div的高度。您可以使用不同的设置，例如每行一行。

3. 使用flexbox网格。不幸的是，flexbox还没有广泛使用

4. 将flexbox与JavaScript混合使用，如http://osvaldas.info/flexbox-based-responsive-equal-height-blocks-with-javascript-fallback

Answer 3

确保所有书籍图像大小相同...或者只需将最小高度设置为＆＃34;投资组合项目＆＃34;类。

Answer 4

只需在每行后添加课程clearfix