Zurb Foundation 6 使用 grid-column-row mixin

Question

我遇到了一些奇怪的行为，想知道我是否错误地使用了grid-column-row。

我有以下 HTML 结构：

<div id="homeTop">
  <!-- homeTop content such as headings and other nested rows and columns -->
</div>
<div id="homeMain">
  <div id="homeMain-left"></div>
  <div id="homeMain-right"></div>
</div>
<div id="homeBottom">
  <!-- homeBottom content such as headings and other nested rows and columns -->
</div>

然后我有以下 SCSS 来设置此内容的样式：

#homeTop {
  @include grid-column-row;
}

#homeMain {
  @include grid-row;
}

#homeMain-left {
  @include grid-column(12);

  @include breakpoint(medium) {
    @include grid-column(8/12);
  }
}

#homeMain-right {
  @include grid-column(12);

  @include breakpoint(medium) {
    @include grid-column(4/12);
  }
}

#homeBottom {
  @include grid-column-row;
}

当我在桌面大小的屏幕上查看页面时，有一行 css 导致 homeBottom div 向右浮动，这导致布局偏离。导致问题的 CSS 行在这里：

#homeBottom:last-child:not(:first-child) {
  float: right;
}

由于column-row 是作为行和​​列的单个元素，换句话说，是一个全宽容器，我很困惑为什么我会希望它有一个浮动属性。这行 CSS 似乎对columns 有意义，但对column-rows 没有意义，因为column-row 的行为不应该取决于它是否是其父级的last-child。

这是一个错误，还是我错误地使用了column-row？我只是想避免将homeBottom 设置为grid-row，然后在其中包含一个额外的html 元素以充当全角grid-column。正如你所看到的，这对于homeTop 来说不是必需的，即使它也使用了grid-column-row mixin。这让我觉得我可能用错了。

我想另一种选择是定义我自己的包含浮点声明的 my-grid-column-row mixin：

@mixin my-grid-column-row {
  @include grid-column-row;
  float: none !important;
}

但这似乎没有必要。

Answer 1

看来这是基础的问题：

http://github.com/zurb/foundation-sites/issues/8108

我现在的解决方法是使用以下内容覆盖 grid-column-row mixin：

@mixin grid-column-row(
  $gutter: $grid-column-gutter
) {
  @include grid-row;
  @include grid-column($gutter: $gutter);
  float: none !important;
}