在Bootstrap堆叠行 [英] Gap in Bootstrap stacked rows

问题描述

我正在建立一个Bootstrap 3网格，最终将成为一个投资组合页面。在下面的bootply中，在第一个示例中，您可以看到它在我的 bootply

I am building a Bootstrap 3 grid that will become a portfolio page eventually. In the following bootply, in the first example, you can see it works perfectly stacking from 6 to 4 to 3 in my bootply

但是在第二个例子中，在同一bootply上，有一个项目的tile更长，当它堆叠时，会在网格中产生一个缺口。

However in the second example, on the same bootply, there is an item where the tile for the item is longer and it causes a gap in the grid when it stacks.

什么是最好的bootstrap友好的解决方案？任何帮助非常感激。

What is the best bootstrap friendly ,solution to this? Any help much appreciated.

推荐答案

有几种方法可以处理：

1. 使用类似masonry的东西将元素动态地适合到可用空间中。


2. 使用 响应列重置标题下的文档中所述的响应类和clearfix css /＃grid>网格 。


3. 使用jQuery动态调整列高度。

1. Give all of the elements in your portfolio a set height.
2. Use something like masonry to dynamically "fit" the elements into the available space.
3. Use the responsive classes and clearfix as described in the doc under the heading Responsive column resets, in the Grid secion.
4. Use jQuery to adjust the column heights dynamically.

如果您的内容是动态生成的你不知道哪些元素将有更长的内容，你有不同的布局设置为不同的断点，响应类方法可以是一个熊适应。我使用一个小技巧。在网格中的每个元素后，我添加一个div，我可以应用一个迷你clearfix使用媒体查询。它是额外的标记，但它解决了问题很好，并允许我有可读性和可维护的标记，同时避免使用javascript来调整布局。以下是使用您的标记的示例：

If your content is dynamically generated so that you don't know which elements will have longer content, and you have different layouts set for different breakpoints, the responsive classes approach can be a bear to adapt. I use a little trick. After each element in the grid, I add a div that I can apply a mini clearfix to using media queries. It's extra markup, but it solves the problem nicely and allows me to have readable and maintainable markup while avoiding the use of javascript to adjust the layout. Here's an example using your markup:

<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路由您已经为包含您的组合元素的行添加了一个类portfolio，以便于定位）：

If you prefer the jQuery route (again, this assumes that you've added a class "portfolio" to the row that contains your portfolio elements for easier targeting):

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

这篇关于在Bootstrap堆叠行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！