bootstrap基于父列的列数

时间:2014-11-13 00:40:41

标签: css twitter-bootstrap twitter-bootstrap-3 sass less

有没有人知道这是否可以通过bootstrap mixins实现。

列(父母的数量)

Neat那样的东西。

在整洁的列中,mixins的工作原理如下

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

$ span可以 3 或类似 3 of 12

  

指定元素应跨越的列数。如果   selector嵌套其父元素的列数   也可以作为论据传递。

感谢

1 个答案:

答案 0 :(得分:0)

当我理解你的问题时,你应该阅读Less mixins and variables

你会发现mixins在Bootstrap源代码的less/mixins/grid.less文件中生成语义网格列。

要生成一个超过3列的div,例如:

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

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

使用时:

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

你的div将超过6列,屏幕宽度低于768像素(xs网格),3列高于768像素,sm网格和向上(显式调用较大的网格混合是除非你想要超过不同数量的列,否则不需要。在更大的网格之前启动较小网格的mixins是很重要的,另见:Bootstrap 3 mixin multiple make-*-column