我正在建立一个Bootstrap 3网格,最终将成为一个投资组合页面.在下面的bootply中,在第一个例子中,您可以看到它在
bootply中完美地堆叠在6到4到3之间
然而,在第二个例子中,在同一个bootply中,有一个项目,其中项目的tile更长,并且当堆栈时,它会在网格中造成间隙.
什么是最好的bootstrap友好的解决方案？任何帮助非常感谢.
解决方法
有几种方法来处理这个问题：
给你的投资组合中的所有元素设置一个高度.
>使用像砖石一样的动态“适合”元素到可用空间.
>使用响应类和clearfix,如文档中的“响应”列标题所述,在Grid秒中复位.
>使用jQuery动态调整列高度.
如果您的内容是动态生成的,以便您不知道哪些元素将具有更长的内容,并且为不同的断点设置了不同的布局,响应类方法可能是一种适应性.我用一个小技巧在网格中的每个元素之后,我添加一个div,我可以应用一个迷你clearfix来使用媒体查询.这是额外的标记,但它很好地解决了问题,并允许我有可读性和可维护的标记,同时避免使用JavaScript来调整布局.以下是使用您的标记的示例：
<div class="row portfolio"> <!--Add a class so you can target with nth-child-->
<div class="col-lg-2 col-sm-3 col-xs-4">
<div class="panel panel-default">
<div class="panel-body">
<a href="#">
<img src="http://placehold.it/200x200" class="img-thumbnail img-responsive">
</a>
</div>
<div class="panel-footer">
This is text
</div>
</div>
</div>
<div class="clear"></div> <!--Here's the added div after every element-->
....
</div> <!--/.portfolio.row-->
CSS：
@media (max-width: 767px) {
.portfolio>.clear:nth-child(6n)::before {
content: '';
display: table;
clear: both;
}
}
@media (min-width: 768px) and (max-width: 1199px) {
.portfolio>.clear:nth-child(8n)::before {
content: '';
display: table;
clear: both;
}
}
@media (min-width: 1200px) {
.portfolio>.clear:nth-child(12n)::before {
content: '';
display: table;
clear: both;
}
}
如果您更喜欢jQuery路由(同样,这也假设您已经在包含投资组合元素的行中添加了一个类“投资组合”,以便更容易地定位)：
var row=$('.portfolio');
$.each(row,function() {
var maxh=0;
$.each($(this).find('div[class^="col-"]'),function() {
if($(this).height() > maxh)
maxh=$(this).height();
});
$.each($(this).find('div[class^="col-"]'),function() {
$(this).height(maxh);
});
});