Bootstrap 堆叠行中的间隙 [英] Gap in Bootstrap stacked rows

问题描述

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

但是，在第二个示例中，在同一个 bootply 上，有一个项目的 tile 更长，并且在堆叠时会导致网格中出现间隙.

最好的引导程序友好解决方案是什么?非常感谢任何帮助.

解决方案

有几种方法可以解决这个问题:

1. 为您的投资组合中的所有元素设置一个高度.
2. 使用砖石之类的东西来动态适应"将元素放入可用空间.
3. 使用网格 部分.
4. 使用 jQuery 动态调整列高.

如果您的内容是动态生成的，因此您不知道哪些元素会有更长的内容，并且您为不同的断点设置了不同的布局，那么响应式类方法可能需要适应.我用了一个小技巧.在网格中的每个元素之后，我添加了一个 div，我可以对使用媒体查询应用迷你清除修复.这是额外的标记，但它很好地解决了问题，并允许我拥有可读和可维护的标记，同时避免使用 javascript 来调整布局.以下是使用您的标记的示例:

更新的 Bootply

<!--添加一个类，以便您可以使用 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 class="panel-footer">这是文字

<div class="clear"></div><!--这是在每个元素之后添加的 div-->....

<!--/.portfolio.row-->

CSS:

@media (max-width: 767px) {.portfolio>.clear:nth-child(6n)::before {内容: '';显示:表；清楚:两者；}}@media (min-width: 768px) 和 (max-width: 1199px) {.portfolio>.clear:nth-child(8n)::before {内容: '';显示:表；清楚:两者；}}@media(最小宽度:1200px){.portfolio>.clear:nth-child(12n)::before {内容: '';显示:表；清楚:两者；}}

如果您更喜欢 jQuery 路线(同样，这假设您已向包含您的投资组合元素的行添加了一个投资组合"类以便于定位):

var row=$('.portfolio');$.each(row, function() {无功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);});});

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

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.

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

解决方案

There are a couple of ways to handle this:

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.

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:

Updated Bootply

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

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屋！