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()将负责清除浮动。

请永远不要使用@include span-columns(12)它，因为它最终会产生很多不相关的代码。