代码是

  <div class="row">
     <div class="col-md-4">
       ...
     </div>
  </div>

当我连续使用12列时，下一个col将转移到下一行

但问题是当我使用不同尺寸的图像时，图像之间仍然存在一些空间

See the screenshot here

Answer 1

这将发生，因为您的图像高度不同。使用像砌体或同位素的jQuery插件，或尝试CSS3列宽......

.row {
 -moz-column-width: 25em;
 -webkit-column-width: 25em;
 -moz-column-gap: 10px;
 -webkit-column-gap:10px; 

}

.row > .col-md-4 {
 display: inline-block;
 padding: 0;
 margin: 10px;
 width: 100%; 
 float:none;
}

http://bootply.com/g5AILTFq7h

Answer 2

问题是<div class="row">跨越容器的整个宽度并保持列。您看到空白区域的列实际上填充了该空间，因此一切都按照应有的方式运行。只是你的图像没有填满整个空间。您可以尝试将该图像的高度设置为100％。要么通过css

img {
    height: 100%;
}

或内嵌，如<img style="height:100%;">

删除无引导空间

代码是

2 个答案: