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%; }

注意:如果我按像素设置max-min/height-width,并且我将窗口的大小调整为彼此重叠,所以我要按百分比设置它!仍然没有得到我想要的结果.

将不胜感激任何帮助.

Answer 1

这是通过将网格(仅在此实例中)转换为的方法来实现的inline-block.那是下面的css和html.另一种方法是使用一个脚本来设置网格,就像砌筑砌块一样,你可以使用像砌体,泥瓦匠,同位素,随机播放和许多其他脚本这样的jscripts.这是一个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>