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

【问题标题】：Difference between span-columns() and row() in Bourbon NeatBourbon Neat 中 span-columns() 和 row() 之间的区别
【发布时间】：2014-04-02 14:22:08
【问题描述】：

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

【问题讨论】：

标签： bourbon neat

【解决方案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)，因为它最终会产生很多不相关的代码。

【讨论】：