Zurb Foundation 4 - 嵌套网格对齐问题

Question

我一直在尝试在使用 Foundation 4 网格时对齐嵌套行，几乎无济于事。

仅供参考，我使用 EpiServer CMS，所以我必须使用 mixins 注入某些样式。

问题是，当我在我的 8 列注入 div#content 中嵌入一个 div.row 时，该行及其列不与它外部的元素齐平。

我尝试添加这个 mixin：div.unmanagedContent {@include grid-row(nest);}，它在本例中有效，但是当 div#content 中没有嵌入 .row 时，负边距会拉出该 div。

我的 SCSS 看起来像这样。请注意，我刚刚在 CodePen 上附加了一个外部 CSS，因此您将看到输出的样式：

// 12 total columns

.contentLayoutBox {
@include grid-row;
}
#content {
@include grid-column(8);
}
#sidebarRight {
@include grid-column(4);
}

这是 CodePen 的 an example 和 Foundation 4 Grid Docs。

任何帮助都会很棒。谢谢。

Answer 1

我希望能看到更多您的 Sass 代码等，但我猜您需要在所有嵌套行上使用 nest 行为。

在我看来，Foundation 在 Sass 中的行主要设计用于一个级别。任何嵌套在另一行中的行都应使用nest 行为，除非您希望在列上进行额外的填充。

在您的 CodePen 中，我能够通过向所有行添加 collapse 类来解决列填充问题，我相信这与在 Sass 中执行 $behavior: nest 相同：

<div class="unmanagedContent">
  <div>
    <div class="row collapse">
      <div class="small-12 columns">
        <div class="row wtf collapse">
          <div class="small-12 columns">
            <h2>Embedded .row</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam dolore delectus accusamus explicabo odit odio minima architecto sequi nihil alias asperiores tenetur distinctio blanditiis quis officia tempora itaque voluptates maiores.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

如果我要尝试使用 Sass mixins 来设置它的样式，我会这样做...

HTML：

<div class="layout-unmanaged-content">
  <div class="layout-content">
    <div class="layout-embedded-row">
      <div class="layout-content">
        <h2>Embedded .row</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam dolore delectus accusamus explicabo odit odio minima architecto sequi nihil alias asperiores tenetur distinctio blanditiis quis officia tempora itaque voluptates maiores.</p>
      </div>
    </div>
  </div>
</div>

萨斯：

.layout-unmanaged-content {
  // You'll need to have the nest here if this is within another Foundation row.
  @include grid-row(nest);

  > .layout-content {
    @include grid-column(12);
  }
}

.layout-embedded-row {
  @include grid-row(nest);

  > .layout-content {
    @include grid-column(12);
  }
}

Answer 2

再次感谢@Chris Peters。现在答案似乎很简单。

你说得对，只有顶级行类应该有 mixin @include grid-row 并且它们的后代应该嵌套在 @include grid-row(nest) 中，所以这就是我所做的：

.one-main-row-class, .another-main-row-class { 
  @include grid-row;
    //Nest decendents of the top-level grid-row
    .row {
     @include grid-row(nest);
    }
 }