在 Bootstrap 3 中创建基础风格的块网格? [英] Creating a Foundation-style Block Grid in Bootstrap 3?

问题描述

在 Zurb Foundation 3+ 中，他们有一个块网格"的 CSS 构造，这是一个无序列表，您可以在其中指定一行中的项目数.

In Zurb Foundation 3+, they have a CSS construct of a "block grid" which is an unordered list where you can specify the number of items in a row.

这是他们的文档.

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

There's no way I can see to do this in Bootstrap 3; there's only columns. I'd like to have the ability to have a repeated element (such as a LI) display easily as a responsive grid, where I can specify how many across by breakpoint, as in Foundation.

我想我可以自己动手，但想看看是否有人有建议或以前遇到过这种情况.

I figure I can roll my own, but wanted to see if anyone had suggestions or had come across this before.

推荐答案

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

I too wish this was feature in BS3. You'll have to create your own solution.

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

My typical workaround is just as Foundation does it, by using percentages to define width, the nth-child selector, and adjusting margins.

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

这篇关于在 Bootstrap 3 中创建基础风格的块网格?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！