Bootstrap堆栈行中的间隙

小编典典

Bootstrap堆栈行中的间隙

html

我正在构建一个Bootstrap 3网格，该网格最终将成为投资组合页面。在下面的bootply中，在第一个示例中，您可以看到它在我的
bootply中完美地从6堆叠到4到3

但是，在第二个示例中，在同一个靴子上，存在一个项目，其中该项目的图块较长，并且在堆叠时会在网格中造成间隙。

最佳的引导友好解决方案是什么？任何帮助，不胜感激。

阅读 374

2020-05-10

共1个答案

小编典典

有两种方法可以解决此问题：

给投资组合中的所有元素设定一个高度。
使用砌体之类的方法将元素动态“拟合”到可用空间中。
按照 Grid部分中“ 响应性列 resets”标题下的文档中的说明使用响应类和clearfix 。
使用jQuery动态调整列高。

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

更新了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;
    }
}

如果您更喜欢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);
    });
});

2020-05-10