你能在Zurb Foundation的同一个css标签中定义一行和一列mixin吗？

Question

我正在使用Zurb Foundation 4 mixins，我想知道如果你在同一个css标签中放入一行和一列会发生什么？

header {
          @include grid-row;
          @include grid-column(9);
          }
h1  {
          }

而不是做类似的事情：

header {
          @include grid-row;
          }
h1  {
          @include grid-column(9);
          }

提前致谢。

Answer 1

如果你将行和列放在同一个css选择器中，你将省略.row或@include grid-row（这意味着@include grid-column(9)属性将覆盖@include grid-row属性）：

header { @include grid-row; @include grid-column(9); }

等于：

header { @include grid-column(9); }

因此，您的列将根据屏幕大小浮动。

当您使用.row或@include grid-row作为单独的标记时，它会根据$row-width大小使列位于页面的中心。

用两个不同的代码来看这个例子：

示例1：

header {
    @include grid-row;
    @include grid-column(9);
}

示例1输出为：

示例2：

#header {
    @include grid-row;
    h1 {
        @include grid-column(9);
    }
    h2 {
        @include grid-column(3);
    }
}

示例2输出为：