css - 在 Bootstrap 3 中创建基础样式的 block 网格？

Question

在 Zurb Foundation 3+ 中，它们有一个“ block 状网格”的 CSS 构造，它是一个无序列表，您可以在其中指定一行中的元素数。

Here's their docs on it.

我无法在 Bootstrap 3 中做到这一点；只有专栏。我希望能够将重复元素(例如 LI)轻松显示为响应式网格，我可以在其中指定断点跨越的数量，就像在 Foundation 中一样。

我想我可以自己动手，但想看看是否有人有建议或以前遇到过这个问题。

Answer 1

我也希望这是 BS3 中的功能。您必须创建自己的解决方案。

我的典型解决方法与 Foundation 一样，通过使用百分比来定义宽度、第 n 个子选择器和调整边距。

[class*="block-grid-"] {
    display: block;
    padding: 0;
    margin: 0 -0.55556rem;
}

[class*="block-grid-"] > li {
    display: block;
    height: auto;
    float: left;
    padding: 0 0.55556rem 1.11111rem;
}

.small-block-grid-3 > li {
    width: 33.33333%;
    list-style: none;
}

.small-block-grid-3 > li:nth-of-type(1n) {
    clear: none;
}

.small-block-grid-3 > li:nth-of-type(3n+1) {
    clear: both;
}