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

Question

我有一个网格中的图片集。我正在使用 "col-lg-4 col-md-6" 让它显示 3x3 的大图片或 2x2 的中图片。但是，为我的中型布局插入了空白 div。

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

我做错了什么？

Answer 1

您是否看过文档中的“响应式列重置”部分？我认为这是您运行遇到的问题：

With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive utility classes.

在此处查看更多信息：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>

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

Bootstrap grid layout inserts a blank div when resized

grid-layout

twitter-bootstrap

twitter-bootstrap-3