Bootstrap 3列彼此相邻？

Question

我尝试使用bootstrap 3制作响应式图像网格，但是当我尝试将它们放在一起时，使用最后2列下面的代码旁边的一个从其他列向下消失：

这是我尝试实现的目标：

HTML：

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3">
            <img class="img" src="path/to/image" />
        </div>
    </div>
</div>

CSS：

.row { overflow:hidden; }
.img { min-width:100%; max-width:100%; min-height:100%; max-height:100%; }
.col-md-3 { min-height:100%; max-height:100%; }

注意：如果我按像素设置最大 - 最小/高度 - 宽度并且我将窗口的大小调整为彼此重叠，那么我就按百分比设置它！仍然没有得到我想要的结果。

非常感谢您的帮助。

Answer 1

这是通过将网格（仅在此实例中）转换为inline-block来实现此目的的方法。那是下面的css和html。另一种方法是使用一个脚本来设置网格，就像砌筑砌块一样，你可以使用像砌体，泥瓦匠，同位素，随机播放和许多其他脚本这样的jscripts。以下是随机播放https://jsbin.com/vaquci/2

的示例

DEMO：https://jsbin.com/rurap/1/

https://jsbin.com/rurap/1/edit?html,css,output

<强> CSS

/* demo */
.col-sm-4 {border:1px solid red;}
.well {height:200px;}
.height1 {height:250px}
.height2 {height:300px}
/* demo */


@media (min-width:768px) {
    .inline-block-row {
        word-spacing: -1em;
        letter-spacing: -1em;
        overflow:hidden;
    }
    .inline-block-row .col-sm-4 {
        word-spacing: normal;
        vertical-align: top;
        letter-spacing: normal;
        display: inline-block;
        float:none;
    }
}
@media (min-width:992px) {
    .inline-block-row .col-md-3 {
        float:none;
    }
}

<强> HTML：

<div class="container-fluid">
   <h1>Inline Block Grid</h1>
   <div class="row inline-block-row">
      <div class="col-sm-4 col-md-3">
         <div class="well height1">1</div>
      </div>
      <div class="col-sm-4 col-md-3">
         <div class="well">2</div>
      </div>
      <div class="col-sm-4 col-md-3">
         <div class="well">3</div>
      </div>
      <div class="col-sm-4 col-md-3">
         <div class="well"> 4</div>
      </div>
      <div class="col-sm-4 col-md-3">
         <div class="well"> 5</div>
      </div>
      <div class="col-sm-4 col-md-3">
         <div class="well height2"> 6</div>
      </div>
      <div class="col-sm-4 col-md-3">
         <div class="well"> 7</div>
      </div>
      <div class="col-sm-4 col-md-3">
         <div class="well height1"> 7</div>
      </div>
      <div class="col-sm-4 col-md-3">
         <div class="well"> 7</div>
      </div>
   </div>
</div>  

Answer 2

简单的解决方案

<强> HTML：

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3">
            <img class="img-responsive" src="path/to/image" />
        </div>
        <div class="col-md-3">
            <img class="img-responsive" src="path/to/image" />
        </div>
        <div class="col-md-3">
            <img class="img-responsive" src="path/to/image" />
        </div>
        <div class="col-md-3">
            <img class="img-responsive" src="path/to/image" />
        </div>

    </div>
    <div class="row">
        <div class="col-md-3">
            <img class="img-responsive" src="path/to/image" />
        </div>
        <div class="col-md-3">
            <img class="img-responsive" src="path/to/image" />
        </div>
        <div class="col-md-3">
            <img class="img-responsive" src="path/to/image" />
        </div>
        <div class="col-md-3">
            <img class="img-responsive" src="path/to/image" />
        </div>

    </div>
    ... more rows
</div>

<强> CSS：

div.row > div {
   padding-bottom: 30%; // This will give height 
}

Answer 3

如果您不需要所有框都具有相同的高度，则应尝试使用Mansory插件http://desandro.github.io/masonry/。这是此类网格的最佳插件。 但如果你需要所有的盒子都有相同的高度。您可以获得最高的高度并为所有盒子设置。像那样：

HTML：

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3 item">
            <img class="img src="path/to/image" />
        </div>
    </div>
</div>

var highestH = 0;
var height = 0;
$('.container-fluid .item').removeAttr('style');
    $('.container-fluid .item').each(function () {
        // verify highest height
        height = $(this).outerHeight();
        if (height > highestH) {
            highestH = height;
        }
        height = highestH;

    });
    $('.container-fluid .item').outerHeight(height);

Answer 4

您实际上可以非常简单地解决此问题，无需任何自定义CSS，只对您的HTML进行微小更改。实际上有两种方式。

1 - 您可以将每行cols放入其自己的<div class="row">：

2 - 或者在每行的最后一项（不是<div class="clearfix"></div>）之后抛出.row，或者如果＃1与您的响应式布局混淆，则将其与hidden/visible辅助类组合。

http://www.bootply.com/yC3nVhlb64