我正在构建一个Bootstrap 3网格,该网格最终将成为投资组合页面。在下面的bootply中,在第一个示例中,您可以看到它在我的 bootply中 完美地从6堆叠到4到3
但是,在第二个示例中,在同一个靴子上,存在一个项目,其中该项目的图块较长,并且在堆叠时会在网格中造成间隙。
最佳的引导友好解决方案是什么?任何帮助,不胜感激。
有两种方法可以解决此问题:
如果您的内容是动态生成的,以至于您不知道哪些元素将具有更长的内容,并且为不同的断点设置了不同的布局,则响应类方法可能会让人难以适应。我使用了一些技巧。在网格中的每个元素之后,我添加了一个div,我可以在使用媒体查询时应用一个miniclearfix。这是额外的标记,但是它很好地解决了问题,并允许我拥有可读性和可维护性的标记,同时避免使用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); }); });