删除引导可用空间

Question

当使用 bootstrap 框架时，有 12 列的连续布局。

代码是

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

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

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

See the screenshot here

Answer 1

这会发生，因为您的图片高度不同。使用 jQuery 插件，如 masonry 或 isotope，或尝试 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

我认为你的问题主要是浮动如何自然工作。如果一个包含元素没有足够的空间容纳它所包含的所有浮动元素，则第一个浮动元素将下降到其前进元素的正下方并滑向左侧。如果在向左倾斜的过程中，下降的浮动元素遇到了一个比前一个元素高的元素，它将停在那里。如果元素高 1 像素或 100 像素，就会发生这种情况。

您需要手动指定每个图像的位置，使用 ¿flexbox?或者使用一些 JavaScript，例如 Masonry。

尝试像使用 Bootstrap 的方式使用行和列会造成您遇到问题的空白。您想要实现的不仅仅是 Bootstrap 网格。

我制作了一个jsFiddle 演示来演示浮动的工作原理以及当父容器不能包含所有浮动的子容器时会发生什么。只需重新调整大小并观察块如何重新排列。

<div></div>
<div></div>
<div></div>
<div></div>
<div class="lg"></div>
<div></div>
<div></div>
<div></div>
<div class="sm"></div>
<div></div>
<div></div>

div {
    width: 50px;
    height: 50px;
    float: left;
    margin: 2px;
    background-color: green;
}
.sm {
    height: 35px;
}
.lg {
    height: 75px;
}

Answer 3

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

img {
    height: 100%;
}

或像<img style="height:100%;">这样的内联