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

Question

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

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

问题是,当我div.row在8列注入的内部嵌入时div#content,该行及其列不会与其外部的元素齐平.

我试图添加这个mixin:div.unmanagedContent {@include grid-row(nest);}在这个例子中有效,但是当没有嵌入.row内部时,负边距会拉出div div#content.

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

// 12 total columns

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

这是CodePen和Foundation 4 Grid Docs的一个例子.

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

Answer 1

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

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

在你的CodePen中,我能够通过向collapse所有行添加一个类来修复列上填充的问题,我认为这与$behavior: nestSass中的相同:

<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);
  }
}