Question

我在网格中有一组图片。我正在使用"col-lg-4 col-md-6"来获取3x3大图片或2x2图片。但是，为我的中等大小布局插入了一个空白div。

看看我的意思。 http://jsfiddle.net/DTcHh/18945/

我做错了什么？

Answer 1

您是否在文档中看到了“响应列重置”部分？我认为这是你遇到的问题：

在四层网格可用的情况下，您必然遇到一些问题，在某些断点处，您的列不能完全正确，因为一个高于另一个。要解决此问题，请使用.clearfix和响应式实用程序类的组合。

在此处查看更多内容：http://getbootstrap.com/css/#grid-responsive-resets

Answer 2

你必须

          <div class="clearfix visible-md"></div>

每次双重

之后

Fiddle : http://jsfiddle.net/o2w0edy6/

以下是文档：http://getbootstrap.com/css/#grid-responsive-resets

<div class="container-fluid">
    <div class="row no-gutter">
        <div class="col-lg-4 col-md-6">
            <a href="#galleryModal" class="gallery-box" data-toggle="modal" data-src="//splashbase.s3.amazonaws.com/unsplash/regular/photo-1430916273432-273c2db881a0%3Fq%3D75%26fm%3Djpg%26w%3D1080%26fit%3Dmax%26s%3Df047e8284d2fdc1df0fd57a5d294614d">
                <img src="//splashbase.s3.amazonaws.com/unsplash/regular/photo-1430916273432-273c2db881a0%3Fq%3D75%26fm%3Djpg%26w%3D1080%26fit%3Dmax%26s%3Df047e8284d2fdc1df0fd57a5d294614d" class="img-responsive" alt="Image 1">
                <div class="gallery-box-caption">
                    <div class="gallery-box-content">
                        <div>
                            <i class="icon-lg ion-ios-search"></i>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-lg-4 col-md-6">
            <a href="#galleryModal" class="gallery-box" data-toggle="modal" data-src="//splashbase.s3.amazonaws.com/getrefe/regular/tumblr_nqune4OGHl1slhhf0o1_1280.jpg">
                <img src="//splashbase.s3.amazonaws.com/getrefe/regular/tumblr_nqune4OGHl1slhhf0o1_1280.jpg" class="img-responsive" alt="Image 2">
                <div class="gallery-box-caption">
                    <div class="gallery-box-content">
                        <div>
                            <i class="icon-lg ion-ios-search"></i>
                        </div>
                    </div>
                </div>
            </a>
        </div>
      <div class="clearfix visible-md"></div>
        <div class="col-lg-4 col-md-6">
            <a href="#galleryModal" class="gallery-box" data-toggle="modal" data-src="//splashbase.s3.amazonaws.com/unsplash/regular/photo-1433959352364-9314c5b6eb0b%3Fq%3D75%26fm%3Djpg%26w%3D1080%26fit%3Dmax%26s%3D3b9bc6caa190332e91472b6828a120a4">
                <img src="//splashbase.s3.amazonaws.com/unsplash/regular/photo-1433959352364-9314c5b6eb0b%3Fq%3D75%26fm%3Djpg%26w%3D1080%26fit%3Dmax%26s%3D3b9bc6caa190332e91472b6828a120a4" class="img-responsive" alt="Image 3">
                <div class="gallery-box-caption">
                    <div class="gallery-box-content">
                        <div>
                            <i class="icon-lg ion-ios-search"></i>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-lg-4 col-md-6">
            <a href="#galleryModal" class="gallery-box" data-toggle="modal" data-src="//splashbase.s3.amazonaws.com/lifeofpix/regular/Life-of-Pix-free-stock-photos-moto-drawing-illusion-nabeel-1440x960.jpg">
                <img src="//splashbase.s3.amazonaws.com/lifeofpix/regular/Life-of-Pix-free-stock-photos-moto-drawing-illusion-nabeel-1440x960.jpg" class="img-responsive" alt="Image 4">
                <div class="gallery-box-caption">
                    <div class="gallery-box-content">
                        <div>
                            <i class="icon-lg ion-ios-search"></i>
                        </div>
                    </div>
                </div>
            </a>
        </div>
      <div class="clearfix visible-md"></div>
        <div class="col-lg-4 col-md-6">
            <a href="#galleryModal" class="gallery-box" data-toggle="modal" data-src="//splashbase.s3.amazonaws.com/lifeofpix/regular/Life-of-Pix-free-stock-photos-new-york-crosswalk-nabeel-1440x960.jpg">
                <img src="//splashbase.s3.amazonaws.com/lifeofpix/regular/Life-of-Pix-free-stock-photos-new-york-crosswalk-nabeel-1440x960.jpg" class="img-responsive" alt="Image 5">
                <div class="gallery-box-caption">
                    <div class="gallery-box-content">
                        <div>
                            <i class="icon-lg ion-ios-search"></i>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-lg-4 col-md-6">
            <a href="#galleryModal" class="gallery-box" data-toggle="modal" data-src="//splashbase.s3.amazonaws.com/lifeofpix/regular/Life-of-Pix-free-stock-photos-clothes-exotic-travel-nabeel-1440x960.jpg">
                <img src="//splashbase.s3.amazonaws.com/lifeofpix/regular/Life-of-Pix-free-stock-photos-clothes-exotic-travel-nabeel-1440x960.jpg" class="img-responsive" alt="Image 6">
                <div class="gallery-box-caption">
                    <div class="gallery-box-content">
                        <div>
                            <i class="icon-lg ion-ios-search"></i>
                        </div>
                    </div>
                </div>
            </a>
        </div>
    </div>
</div>

引导网格布局在调整大小时插入空白div

2 个答案: