twitter-bootstrap - 执行多响应列时清除行 - Bootstrap

Question

这个标题可能不太准确，但情况是这样的:

正如您在 HTML 中看到的，网格系统从 xl 屏幕上的 4 个图像到 lg 屏幕上的 3 个图像，再到更少的 2 个图像。

我试图让它正确显示 - 也就是说，在每个屏幕尺寸上显示适当数量的图像。然而，有些奇怪的事情正在发生，并且无法使用 Bootstrap 类来完全弄清楚。

在我看来，我必须在每个断点处动态添加行。

有什么建议吗？

--更新--刚刚意识到 col-xl-* 不存在。然而，这根本改变不了现状。请忽略 xl 声明。

--更新2--更新了图像。

--更新3--我会尽力澄清我的目标。对于我的帖子中附加的特定图像，我希望每行出现 3 个框 - 不是所有的都乱七八糟。

当它折叠到每行 2 个框(xs 设备)时，我想确保每行都有 2 个框。

Answer 1

使用此 css 扩展 bootstrap.css:

@media (min-width:1200px){
    .auto-clear .col-lg-1:nth-child(12n+1){clear:left;}
    .auto-clear .col-lg-2:nth-child(6n+1){clear:left;}
    .auto-clear .col-lg-3:nth-child(4n+1){clear:left;}
    .auto-clear .col-lg-4:nth-child(3n+1){clear:left;}
    .auto-clear .col-lg-6:nth-child(odd){clear:left;}
}
@media (min-width:992px) and (max-width:1199px){
    .auto-clear .col-md-1:nth-child(12n+1){clear:left;}
    .auto-clear .col-md-2:nth-child(6n+1){clear:left;}
    .auto-clear .col-md-3:nth-child(4n+1){clear:left;}
    .auto-clear .col-md-4:nth-child(3n+1){clear:left;}
    .auto-clear .col-md-6:nth-child(odd){clear:left;}
}
@media (min-width:768px) and (max-width:991px){
    .auto-clear .col-sm-1:nth-child(12n+1){clear:left;}
    .auto-clear .col-sm-2:nth-child(6n+1){clear:left;}
    .auto-clear .col-sm-3:nth-child(4n+1){clear:left;}
    .auto-clear .col-sm-4:nth-child(3n+1){clear:left;}
    .auto-clear .col-sm-6:nth-child(odd){clear:left;}
}
@media (max-width:767px){
    .auto-clear .col-xs-1:nth-child(12n+1){clear:left;}
    .auto-clear .col-xs-2:nth-child(6n+1){clear:left;}
    .auto-clear .col-xs-3:nth-child(4n+1){clear:left;}
    .auto-clear .col-xs-4:nth-child(3n+1){clear:left;}
    .auto-clear .col-xs-6:nth-child(odd){clear:left;}
}

像这样使用它:

<div class="row auto-clear">
    <div class="col-xs-6 col-sm-4 col-md-4 col-lg-3">
        <p>Hey</p>
    </div>
</div>

注意:这需要使用所有列大小，并且所有列大小相同。