Question

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

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

问题在于，当我的8列注入div.row中有嵌入式div#content时，该行＆amp;它的列不与它外面的元素齐平。

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

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

// 12 total columns

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

这是CodePen＆amp;的an example。 Foundation 4 Grid Docs。

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

Answer 1

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

在我看来，基金会在Sass中的行主要是为了在一个层面上使用。嵌套在另一行中的任何行都应使用nest行为，除非您希望列上有额外的填充。

在CodePen中，我通过在所有行中添加collapse类来修复列上填充的问题，我认为这与在{C}内执行$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);
    }
 }

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

2 个答案: