Zurb基金会4 - 嵌套的网格对齐问题

我一直在尝试使用基金会4网格对齐嵌套的行，到差不多无济于事。Zurb基金会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); 
}

这里的an example在CodePen &的Foundation 4 Grid Docs。

任何帮助将是伟大的。谢谢。

来源

2014-01-29 Todd

我看着CodePen，看了你的描述，仍然不确定你想要解决什么问题。您是否试图将标题“嵌入.row”及其随附的Lorem ipsum与“这是嵌入式div.row之外”完全一致？ –

嗨@ChrisPeters。是!试图解释它并不容易，但这是问题所在。 – Todd

再次感谢@Chris Peters。答案现在看起来很简单。

你是正确的，只有顶部行类应该有混入@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); 
    } 
}

来源

2014-03-18 22:59:36 Todd

::奥利弗扭曲的声音::你能至少给我一个票加我的麻烦吗？ :) –

如果我有代表。 – Todd

明白了。没问题。 :) –

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

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

在你CodePen，我能够通过添加类的collapse到所有行，我相信的修复与列填充的问题是一样的无礼之内做$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>

如果我尝试用萨斯混入的风格这一点，这是我会做什么？

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

来源

2014-03-05 20:38:28

Zurb基金会4 - 嵌套的网格对齐问题

回答

相关问题