css - 基于父列的 Bootstrap 列数

Question

有谁知道这是否可以通过 bootstrap mixins 来完成。

列(父级数)

像什么Neat有。

在 Neat the Columns 中，mixins 的工作方式如下

@mixin span-columns($span, $display: block) { ... }

$span 可以是 3 或类似于 3 of 12

Specifies the number of columns an element should span. If the selector is nested the number of columns of its parent element should be passed as an argument as well.

谢谢

Answer 1

当我很好地理解您的问题时，您应该阅读 Less mixins and variables .

您将在 Bootstrap 源代码的 less/mixins/grid.less 文件中找到用于生成语义网格列的 mixins。

要生成一个跨越 3 列的 div，您应该使用例如:

div.three{
.make-xs-column(3);
}

请注意这些 mixin 的移动优先性质。使用上面的代码，xs mixin 生成 CSS 代码，该代码将应用于所有屏幕宽度(无媒体查询)。

使用时:

div.three{
.make-xs-column(6);
.make-sm-column(3);
}

对于屏幕宽度低于 768 像素(xs 网格)的 6 列和高于 768 像素的屏幕宽度的 3 列，sm 网格及以上(显式)除非您想跨越不同数量的列，否则不需要调用较大的网格混合)。在较大网格之前为较小网格启动 mixins 很重要，另请参阅:Bootstrap 3 mixin multiple make-*-column