bourbon - Bourbon Neat 中 span-columns() 和 row() 之间的区别

Question

@include span-columns(12) 和 @include row() 有什么区别？我应该使用哪个以及何时使用？

Answer 1

这里有 3 个选项:

div.span-12 {
  @include span-columns(12);
}

div.row {
  @include row();
}

div.fill-parent {
  @include fill-parent();
}

这是他们的输出:

div.span-12 {
  float: left;
  display: block;
  margin-right: 2.35765%;
  width: 100%;
}

div.span-12:last-child {
  margin-right: 0; 
}

div.row {
  *zoom: 1;
  display: block; 
}

div.row:before, div.row:after {
  content: " ";
  display: table; 
}

div.row:after {
  clear: both; 
}

div.fill-parent {
  width: 100%; 
}

如果您只想让一个元素填充其父元素，那么 fill-parent() 是最好的方法。如果您想在全角元素内添加其他元素，则 row() 将负责清除 float 。

请不要使用@include span-columns(12)，因为它最终会生成大量不相关的代码。