html - 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。另一种方法是使用一个脚本来设置网格，就像相互重叠的砌 block 一样，您可以使用 jscripts，例如 masonry、mason、isotope、shuffle 和许多其他脚本。这是随机播放的示例 https://jsbin.com/vaquci/2

演示: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>