Zurb Foundation 6 使用网格-列-行 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 行为不应该取决于它是否是 [=20] =] 的父级。

这是一个错误，还是我使用 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 grid-column-row(
  $gutter: $grid-column-gutter
) {
  @include grid-row;
  @include grid-column($gutter: $gutter);
  float: none !important;
}

Zurb Foundation 6 使用网格-列-行 mixin

Zurb Foundation 6 using grid-column-row mixin

css

zurb-foundation

zurb-foundation-6